evui 3.3.36 → 3.3.39

package/src/components/window/Window.vue

@@ -1,329 +1,329 @@
-<template>
-  <teleport to="#ev-window-modal">
-    <transition
-      name="ev-window-fade"
-      appear
-    >
-      <div
-        v-if="visible"
-        :class="[
-          'ev-window-wrapper',
-          { 'scroll-lock': hideScroll },
-          { 'scroll-allow': !hideScroll && !isModal },
-        ]"
-      >
-        <div
-          v-if="isModal"
-          class="ev-window-dim-layer"
-          @click="closeWin('layer')"
-          @wheel.stop.prevent="() => {}"
-        />
-        <div
-          ref="windowRef"
-          :class="['ev-window', windowClass, { fullscreen: !!fullscreen }]"
-          :style="{
-            ...baseStyle,
-            ...dragStyle,
-          }"
-          @mousedown="startDrag"
-          @mousemove="moveMouse"
-          @click="setFocus"
-        >
-          <div
-            v-if="$slots.header || iconClass || title"
-            ref="headerRef"
-            class="ev-window-header"
-          >
-            <template v-if="$slots.header">
-              <slot name="header" />
-            </template>
-            <template v-else>
-              <span
-                v-if="iconClass"
-                class="ev-window-icon"
-              >
-                <i :class="iconClass"/>
-              </span>
-              <p
-                v-if="title"
-                class="ev-window-title"
-              >
-                {{ title }}
-              </p>
-            </template>
-          </div>
-          <div class="ev-window-content">
-            <slot />
-          </div>
-          <div
-            v-if="$slots.footer"
-            class="ev-window-footer"
-          >
-            <slot name="footer" />
-          </div>
-          <div class="ev-window-top-right-icon">
-            <span
-              v-if="maximizable && !fullscreen"
-              class="ev-window-maximizable"
-              @click="clickExpandBtn"
-            >
-              <i
-                :class="maximizableIcon"
-              />
-            </span>
-            <span
-              class="ev-window-close"
-              @click="closeWin"
-            >
-              <i class="ev-icon-close"/>
-            </span>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script>
-import { useEscCloseAndFocusable, useModel, useMouseEvent } from './uses';
-
-export default {
-  name: 'EvWindow',
-  props: {
-    style: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: [String, Number],
-      default: null,
-    },
-    windowClass: {
-      type: String,
-      default: '',
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    width: {
-      type: [String, Number],
-      default: '50vw',
-    },
-    height: {
-      type: [String, Number],
-      default: '50vh',
-    },
-    minWidth: {
-      type: [String, Number],
-      default: 150,
-    },
-    minHeight: {
-      type: [String, Number],
-      default: 150,
-    },
-    fullscreen: {
-      type: Boolean,
-      default: false,
-    },
-    isModal: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnClickModal: {
-      type: Boolean,
-      default: false,
-    },
-    hideScroll: {
-      type: Boolean,
-      default: true,
-    },
-    draggable: {
-      type: Boolean,
-      default: false,
-    },
-    resizable: {
-      type: Boolean,
-      default: false,
-    },
-    maximizable: {
-      type: Boolean,
-      default: false,
-    },
-    escClose: {
-      type: Boolean,
-      default: false,
-    },
-    focusable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: [
-    'update:visible',
-    'mousedown',
-    'mousedown-mouseup',
-    'mousedown-mousemove',
-    'resize',
-    'expand',
-  ],
-  setup() {
-    const {
-      windowRef,
-      headerRef,
-      isFullExpandWindow,
-      maximizableIcon,
-      baseStyle,
-      closeWin,
-      numberToUnit,
-      removeUnit,
-    } = useModel();
-
-    const {
-      dragStyle,
-      startDrag,
-      moveMouse,
-      clickExpandBtn,
-    } = useMouseEvent({
-      windowRef,
-      headerRef,
-      isFullExpandWindow,
-      numberToUnit,
-      removeUnit,
-    });
-
-    const { setFocus } = useEscCloseAndFocusable({ closeWin, windowRef });
-
-    return {
-      windowRef,
-      headerRef,
-      baseStyle,
-      dragStyle,
-      maximizableIcon,
-
-      closeWin,
-      startDrag,
-      moveMouse,
-      clickExpandBtn,
-
-      setFocus,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-.ev-window-scroll-lock {
-  overflow: hidden !important;
-}
-.ev-window-scroll-allow {
-  position: relative !important;
-  &.horizontal-hide {
-    overflow-x: hidden !important;
-  }
-  &.vertical-hide {
-    overflow-y: hidden !important;
-  }
-  &.hide {
-    overflow: hidden !important;
-  }
-}
-.ev-window-open {
-  position: relative !important;
-}
-.ev-window-dim-layer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 700;
-}
-.ev-window {
-  $padding-vertical: 20px;
-  $padding-horizontal: 17px;
-
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50vw;
-  height: 50vh;
-  max-width: 100%;
-  max-height: 100%;
-  flex-direction: column;
-  box-sizing: border-box;
-  border-radius: $default-radius;
-  background-color: #FDFDFD;
-  border: 1px solid #E3E3E3;
-  transition: opacity .2s ease-in-out, transform .3s ease-in-out;
-  font-size: $font-size-medium;
-  line-height: 1.5em;
-  z-index: 700;
-
-  &.fullscreen {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-  }
-
-  &-fade-enter-active,
-  &-fade-leave-active {
-    .ev-window {
-      opacity: 0;
-      transform: translateY(-10%);
-    }
-  }
-
-  &-header {
-    display: flex;
-    padding: $padding-vertical $padding-horizontal;
-    font-weight: bold;
-    font-size: $font-size-large;
-  }
-
-  &-content {
-    padding: $padding-vertical $padding-horizontal;
-    overflow: auto;
-    flex: 1;
-  }
-
-  &-footer {
-    padding: $padding-vertical $padding-horizontal;
-  }
-
-  &-title {
-    color: #303133;
-  }
-
-  &-icon {
-    margin-right: $padding-horizontal;
-  }
-
-  &-top-right-icon {
-    position: absolute;
-    top: $padding-vertical;
-    right: $padding-horizontal;
-    > span {
-      display: inline-flex;
-      width: 22px;
-      height: 22px;
-      margin-left: 8px;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      font-size: 16px;
-    }
-  }
-}
-</style>
+<template>
+  <teleport to="#ev-window-modal">
+    <transition
+      name="ev-window-fade"
+      appear
+    >
+      <div
+        v-if="visible"
+        :class="[
+          'ev-window-wrapper',
+          { 'scroll-lock': hideScroll },
+          { 'scroll-allow': !hideScroll && !isModal },
+        ]"
+      >
+        <div
+          v-if="isModal"
+          class="ev-window-dim-layer"
+          @click="closeWin('layer')"
+          @wheel.stop.prevent="() => {}"
+        />
+        <div
+          ref="windowRef"
+          :class="['ev-window', windowClass, { fullscreen: !!fullscreen }]"
+          :style="{
+            ...baseStyle,
+            ...dragStyle,
+          }"
+          @mousedown="startDrag"
+          @mousemove="moveMouse"
+          @click="setFocus"
+        >
+          <div
+            v-if="$slots.header || iconClass || title"
+            ref="headerRef"
+            class="ev-window-header"
+          >
+            <template v-if="$slots.header">
+              <slot name="header" />
+            </template>
+            <template v-else>
+              <span
+                v-if="iconClass"
+                class="ev-window-icon"
+              >
+                <i :class="iconClass"/>
+              </span>
+              <p
+                v-if="title"
+                class="ev-window-title"
+              >
+                {{ title }}
+              </p>
+            </template>
+          </div>
+          <div class="ev-window-content">
+            <slot />
+          </div>
+          <div
+            v-if="$slots.footer"
+            class="ev-window-footer"
+          >
+            <slot name="footer" />
+          </div>
+          <div class="ev-window-top-right-icon">
+            <span
+              v-if="maximizable && !fullscreen"
+              class="ev-window-maximizable"
+              @click="clickExpandBtn"
+            >
+              <i
+                :class="maximizableIcon"
+              />
+            </span>
+            <span
+              class="ev-window-close"
+              @click="closeWin"
+            >
+              <i class="ev-icon-close"/>
+            </span>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import { useEscCloseAndFocusable, useModel, useMouseEvent } from './uses';
+
+export default {
+  name: 'EvWindow',
+  props: {
+    style: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: [String, Number],
+      default: null,
+    },
+    windowClass: {
+      type: String,
+      default: '',
+    },
+    iconClass: {
+      type: String,
+      default: '',
+    },
+    width: {
+      type: [String, Number],
+      default: '50vw',
+    },
+    height: {
+      type: [String, Number],
+      default: '50vh',
+    },
+    minWidth: {
+      type: [String, Number],
+      default: 150,
+    },
+    minHeight: {
+      type: [String, Number],
+      default: 150,
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false,
+    },
+    isModal: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false,
+    },
+    hideScroll: {
+      type: Boolean,
+      default: true,
+    },
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+    resizable: {
+      type: Boolean,
+      default: false,
+    },
+    maximizable: {
+      type: Boolean,
+      default: false,
+    },
+    escClose: {
+      type: Boolean,
+      default: false,
+    },
+    focusable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    'update:visible',
+    'mousedown',
+    'mousedown-mouseup',
+    'mousedown-mousemove',
+    'resize',
+    'expand',
+  ],
+  setup() {
+    const {
+      windowRef,
+      headerRef,
+      isFullExpandWindow,
+      maximizableIcon,
+      baseStyle,
+      closeWin,
+      numberToUnit,
+      removeUnit,
+    } = useModel();
+
+    const {
+      dragStyle,
+      startDrag,
+      moveMouse,
+      clickExpandBtn,
+    } = useMouseEvent({
+      windowRef,
+      headerRef,
+      isFullExpandWindow,
+      numberToUnit,
+      removeUnit,
+    });
+
+    const { setFocus } = useEscCloseAndFocusable({ closeWin, windowRef });
+
+    return {
+      windowRef,
+      headerRef,
+      baseStyle,
+      dragStyle,
+      maximizableIcon,
+
+      closeWin,
+      startDrag,
+      moveMouse,
+      clickExpandBtn,
+
+      setFocus,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../style/index.scss';
+.ev-window-scroll-lock {
+  overflow: hidden !important;
+}
+.ev-window-scroll-allow {
+  position: relative !important;
+  &.horizontal-hide {
+    overflow-x: hidden !important;
+  }
+  &.vertical-hide {
+    overflow-y: hidden !important;
+  }
+  &.hide {
+    overflow: hidden !important;
+  }
+}
+.ev-window-open {
+  position: relative !important;
+}
+.ev-window-dim-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 700;
+}
+.ev-window {
+  $padding-vertical: 20px;
+  $padding-horizontal: 17px;
+
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+  max-width: 100%;
+  max-height: 100%;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-radius: $default-radius;
+  background-color: #FDFDFD;
+  border: 1px solid #E3E3E3;
+  transition: opacity .2s ease-in-out, transform .3s ease-in-out;
+  font-size: $font-size-medium;
+  line-height: 1.5em;
+  z-index: 700;
+
+  &.fullscreen {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+
+  &-fade-enter-active,
+  &-fade-leave-active {
+    .ev-window {
+      opacity: 0;
+      transform: translateY(-10%);
+    }
+  }
+
+  &-header {
+    display: flex;
+    padding: $padding-vertical $padding-horizontal;
+    font-weight: bold;
+    font-size: $font-size-large;
+  }
+
+  &-content {
+    padding: $padding-vertical $padding-horizontal;
+    overflow: auto;
+    flex: 1;
+  }
+
+  &-footer {
+    padding: $padding-vertical $padding-horizontal;
+  }
+
+  &-title {
+    color: #303133;
+  }
+
+  &-icon {
+    margin-right: $padding-horizontal;
+  }
+
+  &-top-right-icon {
+    position: absolute;
+    top: $padding-vertical;
+    right: $padding-horizontal;
+    > span {
+      display: inline-flex;
+      width: 22px;
+      height: 22px;
+      margin-left: 8px;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-size: 16px;
+    }
+  }
+}
+</style>

package/src/components/window/index.js

@@ -1,7 +1,7 @@
-import EvWindow from './Window';
-
-EvWindow.install = (app) => {
-  app.component(EvWindow.name, EvWindow);
-};
-
-export default EvWindow;
+import EvWindow from './Window';
+
+EvWindow.install = (app) => {
+  app.component(EvWindow.name, EvWindow);
+};
+
+export default EvWindow;