@melt-js/tpl-vue2-admin-ele 1.0.5 → 1.0.6

package/src/components/Screenfull/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-tooltip
+    :content="tooltipText"
+    effect="dark"
+    placement="bottom"
+    :open-delay="300"
+  >
+    <button
+      type="button"
+      class="screenfull-btn"
+      :class="{ 'is-fullscreen': isFullscreen, 'is-disabled': !isSupported }"
+      :aria-label="tooltipText"
+      :aria-pressed="isFullscreen ? 'true' : 'false'"
+      :aria-disabled="isSupported ? 'false' : 'true'"
+      @click="toggle"
+    >
+      <svg
+        class="screenfull-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path
+          v-if="isFullscreen"
+          d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"
+        />
+        <path
+          v-else
+          d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
+        />
+      </svg>
+      <span v-if="showText" class="screenfull-text">{{ buttonText }}</span>
+    </button>
+  </el-tooltip>
+</template>
+
+<script>
+import {
+  FULLSCREEN_CHANGE_EVENTS,
+  exitFullscreen,
+  getFullscreenElement,
+  isFullscreenSupported,
+  requestFullscreen
+} from '../../utils/fullscreen'
+
+/**
+ * Page fullscreen toggle.
+ *
+ * Usage:
+ *   <screenfull />                          // fullscreen the whole page
+ *   <screenfull target="#chart-panel" />    // fullscreen one page area
+ *   <screenfull show-text />                // icon + label
+ */
+export default {
+  name: 'Screenfull',
+  props: {
+    /**
+     * Fullscreen target: a CSS selector, an element or a function returning
+     * an element. Defaults to `document.documentElement`.
+     */
+    target: {
+      type: [String, Object, Function],
+      default: null
+    },
+    enterText: {
+      type: String,
+      default: 'Fullscreen'
+    },
+    exitText: {
+      type: String,
+      default: 'Exit fullscreen'
+    },
+    unsupportedText: {
+      type: String,
+      default: 'Fullscreen is not supported by this browser'
+    },
+    showText: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isFullscreen: false
+    }
+  },
+  computed: {
+    isSupported() {
+      return isFullscreenSupported()
+    },
+    buttonText() {
+      return this.isFullscreen ? this.exitText : this.enterText
+    },
+    tooltipText() {
+      return this.isSupported ? this.buttonText : this.unsupportedText
+    }
+  },
+  mounted() {
+    this.isFullscreen = !!getFullscreenElement()
+    FULLSCREEN_CHANGE_EVENTS.forEach(event => {
+      document.addEventListener(event, this.handleFullscreenChange)
+    })
+  },
+  beforeDestroy() {
+    FULLSCREEN_CHANGE_EVENTS.forEach(event => {
+      document.removeEventListener(event, this.handleFullscreenChange)
+    })
+  },
+  methods: {
+    handleFullscreenChange() {
+      const isFullscreen = !!getFullscreenElement()
+      if (isFullscreen === this.isFullscreen) return
+
+      this.isFullscreen = isFullscreen
+      this.$emit('change', isFullscreen)
+    },
+    resolveTarget() {
+      const { target } = this
+      if (!target) return document.documentElement
+      if (typeof target === 'function') return target()
+      if (typeof target === 'string') return document.querySelector(target)
+      return target
+    },
+    notify(message) {
+      this.$emit('error', message)
+      if (this.$message) this.$message.warning(message)
+    },
+    async toggle() {
+      if (!this.isSupported) {
+        this.notify(this.unsupportedText)
+        return
+      }
+
+      const target = this.resolveTarget()
+      if (!target || target.nodeType !== 1) {
+        this.notify(`Fullscreen target "${this.target}" was not found`)
+        return
+      }
+
+      try {
+        if (getFullscreenElement()) {
+          await exitFullscreen()
+        } else {
+          await requestFullscreen(target)
+        }
+      } catch (error) {
+        console.warn('[Screenfull] Failed to toggle fullscreen:', error)
+        this.notify('Unable to toggle fullscreen mode')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screenfull-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.025);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #409eff;
+    outline-offset: -2px;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+}
+
+.screenfull-icon {
+  flex: none;
+  width: 20px;
+  height: 20px;
+}
+
+.screenfull-text {
+  margin-left: 6px;
+  font-size: 14px;
+  line-height: 1;
+  white-space: nowrap;
+}
+</style>

package/src/components/index.js

@@ -1,2 +1,3 @@
 export { default as SvgIcon } from './SvgIcon'
 export { default as Hamburger } from './Hamburger'
+export { default as Screenfull } from './Screenfull'

package/src/entrance/libTypes.ts

@@ -14,6 +14,7 @@ import { LIB_NAME } from '../configs/subApp'
 export type CompTypes = {
   SvgIcon: {},
   Hamburger: {},
+  Screenfull: {},
 };
 
 /**

package/src/layout/components/AppMain.vue

@@ -1,40 +1,89 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <router-view :key="key" />
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      return this.$route.path
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  min-height: calc(100vh - 50px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-.fixed-header+.app-main {
-  padding-top: 50px;
-}
-</style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
-</style>
+<template>
+  <section class="app-main">
+    <screenfull
+      class="app-main__screenfull"
+      :target="resolveFullscreenTarget"
+    />
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
+  </section>
+</template>
+
+<script>
+import Screenfull from '@/components/Screenfull'
+
+export default {
+  name: 'AppMain',
+  components: {
+    Screenfull
+  },
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  },
+  methods: {
+    // Only the page content goes fullscreen, the sidebar / navbar /
+    // breadcrumb stay outside of the fullscreen element.
+    resolveFullscreenTarget() {
+      return this.$el
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  .app-main__screenfull {
+    position: absolute;
+    top: 16px;
+    right: 20px;
+    z-index: 10;
+    width: 34px;
+    height: 34px;
+    border: 1px solid #e4e7ed;
+    border-radius: 6px;
+    background: #fff;
+    color: #606266;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
+
+    &:hover {
+      color: #409eff;
+      border-color: #c6e2ff;
+      background: #ecf5ff;
+    }
+  }
+}
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+
+.app-main:fullscreen,
+.app-main:-webkit-full-screen {
+  min-height: 100vh;
+  padding-top: 0;
+  background: #fff;
+  overflow: auto;
+
+  .app-main__screenfull {
+    position: fixed;
+  }
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>

package/src/utils/fullscreen.js

@@ -0,0 +1,128 @@
+/**
+ * Cross-browser helpers for the Fullscreen API.
+ *
+ * The standard API is used first, then the WebKit / Mozilla / Trident
+ * prefixed variants, so the screenfull button keeps working in older
+ * Safari / Edge (Legacy) builds.
+ */
+
+const REQUEST_METHODS = [
+  'requestFullscreen',
+  'webkitRequestFullscreen',
+  'webkitRequestFullScreen',
+  'mozRequestFullScreen',
+  'msRequestFullscreen'
+]
+
+const EXIT_METHODS = [
+  'exitFullscreen',
+  'webkitExitFullscreen',
+  'webkitCancelFullScreen',
+  'mozCancelFullScreen',
+  'msExitFullscreen'
+]
+
+const FULLSCREEN_ELEMENT_KEYS = [
+  'fullscreenElement',
+  'webkitFullscreenElement',
+  'mozFullScreenElement',
+  'msFullscreenElement'
+]
+
+const FULLSCREEN_ENABLED_KEYS = [
+  'fullscreenEnabled',
+  'webkitFullscreenEnabled',
+  'mozFullScreenEnabled',
+  'msFullscreenEnabled'
+]
+
+function findMethod(target, methods) {
+  return methods.find(method => target && typeof target[method] === 'function')
+}
+
+/**
+ * Whether the current browser (and browsing context) allows fullscreen.
+ * `fullscreenEnabled` is `false` inside an iframe without `allowfullscreen`.
+ *
+ * @returns {boolean}
+ */
+export function isFullscreenSupported() {
+  if (typeof document === 'undefined') return false
+
+  const enabledKey = FULLSCREEN_ENABLED_KEYS.find(key => document[key] !== undefined)
+  if (enabledKey) return !!document[enabledKey]
+
+  // Very old implementations expose the methods without the enabled flag.
+  return !!findMethod(document.documentElement, REQUEST_METHODS)
+}
+
+/**
+ * The element currently displayed in fullscreen, if any.
+ *
+ * @returns {Element|null}
+ */
+export function getFullscreenElement() {
+  if (typeof document === 'undefined') return null
+
+  const key = FULLSCREEN_ELEMENT_KEYS.find(name => !!document[name])
+  return key ? document[key] : null
+}
+
+/**
+ * Request fullscreen for an element.
+ *
+ * @param {Element} element
+ * @returns {Promise<void>}
+ */
+export function requestFullscreen(element) {
+  if (!element || element.nodeType !== 1) {
+    return Promise.reject(new Error('[Screenfull] A valid target element is required'))
+  }
+
+  const method = findMethod(element, REQUEST_METHODS)
+  if (!method) {
+    return Promise.reject(new Error('[Screenfull] The Fullscreen API is not supported'))
+  }
+
+  try {
+    const result = element[method]()
+    return result && typeof result.then === 'function' ? result : Promise.resolve()
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+/**
+ * Leave fullscreen mode.
+ *
+ * @returns {Promise<void>}
+ */
+export function exitFullscreen() {
+  if (typeof document === 'undefined') {
+    return Promise.reject(new Error('[Screenfull] The Fullscreen API is not supported'))
+  }
+
+  const method = findMethod(document, EXIT_METHODS)
+  if (!method) {
+    return Promise.reject(new Error('[Screenfull] The Fullscreen API is not supported'))
+  }
+
+  try {
+    const result = document[method]()
+    return result && typeof result.then === 'function' ? result : Promise.resolve()
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+/**
+ * Events fired by the different browser implementations.
+ *
+ * @type {string[]}
+ */
+export const FULLSCREEN_CHANGE_EVENTS = [
+  'fullscreenchange',
+  'webkitfullscreenchange',
+  'mozfullscreenchange',
+  'MSFullscreenChange'
+]

package/hel_dist/static/css/chunk-67ce6001.3f0a3a92.css

@@ -1 +0,0 @@
-.svg-icon[data-v-e08fc41e]{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.svg-external-icon[data-v-e08fc41e]{background-color:currentColor;-webkit-mask-size:cover!important;mask-size:cover!important;display:inline-block}.hamburger[data-v-49e15297]{display:inline-block;vertical-align:middle;width:20px;height:20px}.hamburger.is-active[data-v-49e15297]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

package/hel_dist/static/js/chunk-67ce6001.a09628e2.js

@@ -1 +0,0 @@
-(window["helJsonp_tpl-vue2-admin-ele_1793870469932"]=window["helJsonp_tpl-vue2-admin-ele_1793870469932"]||[]).push([["chunk-67ce6001"],{"13be":function(t,e,n){"use strict";var r=n("e605"),c=n("99a5").trim,s=n("4d47");r({target:"String",proto:!0,forced:s("trim")},{trim:function(){return c(this)}})},"2c99":function(t,e,n){},"4d47":function(t,e,n){"use strict";var r=n("6cc4").PROPER,c=n("2c8d"),s=n("99e9"),i="​…᠎";t.exports=function(t){return c((function(){return!!s[t]()||i[t]()!==i||r&&s[t].name!==t}))}},"4f1e":function(t,e,n){"use strict";var r=function(){var t=this,e=t._self._c;return e("div",{staticStyle:{padding:"0 15px"},on:{click:t.toggleClick}},[e("svg",{staticClass:"hamburger",class:{"is-active":t.isActive},attrs:{viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg",width:"64",height:"64"}},[e("path",{attrs:{d:"M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"}})])])},c=[],s={name:"Hamburger",props:{isActive:{type:Boolean,default:!1}},methods:{toggleClick:function(){this.$emit("toggleClick")}}},i=s,a=(n("8dd0"),n("ad2c")),o=Object(a["a"])(i,r,c,!1,null,"49e15297",null);e["a"]=o.exports},6036:function(t,e,n){"use strict";var r=n("e605"),c=n("d62a");r({target:"RegExp",proto:!0,forced:/./.exec!==c},{exec:c})},"61f7":function(t,e,n){"use strict";n.d(e,"a",(function(){return r})),n.d(e,"b",(function(){return c}));n("6036"),n("92c2"),n("13be");function r(t){return/^(https?:|mailto:|tel:)/.test(t)}function c(t){var e=["admin","editor"];return e.indexOf(t.trim())>=0}},6480:function(t,e,n){},"6c72":function(t,e,n){"use strict";n.r(e);var r={};n.r(r),n.d(r,"SvgIcon",(function(){return c["a"]})),n.d(r,"Hamburger",(function(){return s["a"]}));var c=n("c00a"),s=n("4f1e");e["default"]=r},"8dd0":function(t,e,n){"use strict";n("2c99")},"90e0":function(t,e,n){"use strict";var r=n("2c8d"),c=n("ff10"),s=c.RegExp;t.exports=r((function(){var t=s("(?<a>b)","g");return"b"!==t.exec("b").groups.a||"bc"!=="b".replace(t,"$<a>c")}))},"92c2":function(t,e,n){"use strict";n("6036");var r=n("e605"),c=n("a86f"),s=n("ed76"),i=n("083c"),a=n("b1de"),o=function(){var t=!1,e=/[ac]/;return e.exec=function(){return t=!0,/./.exec.apply(this,arguments)},!0===e.test("abc")&&t}(),u=/./.test;r({target:"RegExp",proto:!0,forced:!o},{test:function(t){var e=i(this),n=a(t),r=e.exec;if(!s(r))return c(u,e,n);var o=c(r,e,n);return null!==o&&(i(o),!0)}})},"95bf":function(t,e,n){"use strict";var r=n("2c8d"),c=n("ff10"),s=c.RegExp;t.exports=r((function(){var t=s(".","s");return!(t.dotAll&&t.test("\n")&&"s"===t.flags)}))},"99a5":function(t,e,n){"use strict";var r=n("155d"),c=n("5bf4"),s=n("b1de"),i=n("99e9"),a=r("".replace),o=RegExp("^["+i+"]+"),u=RegExp("(^|[^"+i+"])["+i+"]+$"),l=function(t){return function(e){var n=s(c(e));return 1&t&&(n=a(n,o,"")),2&t&&(n=a(n,u,"$1")),n}};t.exports={start:l(1),end:l(2),trim:l(3)}},"99e9":function(t,e,n){"use strict";t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},ad2c:function(t,e,n){"use strict";function r(t,e,n,r,c,s,i,a){var o,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),s&&(u._scopeId="data-v-"+s),i?(o=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),c&&c.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},u._ssrRegister=o):c&&(o=a?function(){c.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:c),o)if(u.functional){u._injectStyles=o;var l=u.render;u.render=function(t,e){return o.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,o):[o]}return{exports:t,options:u}}n.d(e,"a",(function(){return r}))},bb37:function(t,e,n){"use strict";var r=n("2c8d"),c=n("ff10"),s=c.RegExp,i=r((function(){var t=s("a","y");return t.lastIndex=2,null!==t.exec("abcd")})),a=i||r((function(){return!s("a","y").sticky})),o=i||r((function(){var t=s("^r","gy");return t.lastIndex=2,null!==t.exec("str")}));t.exports={BROKEN_CARET:o,MISSED_STICKY:a,UNSUPPORTED_Y:i}},c00a:function(t,e,n){"use strict";var r=function(){var t=this,e=t._self._c;return t.isExternal?e("div",t._g({staticClass:"svg-external-icon svg-icon",style:t.styleExternalIcon},t.$listeners)):e("svg",t._g({class:t.svgClass,attrs:{"aria-hidden":"true"}},t.$listeners),[e("use",{attrs:{"xlink:href":t.iconName}})])},c=[],s=n("61f7"),i={name:"SvgIcon",props:{iconClass:{type:String,required:!0},className:{type:String,default:""}},computed:{isExternal:function(){return Object(s["a"])(this.iconClass)},iconName:function(){return"#icon-".concat(this.iconClass)},svgClass:function(){return this.className?"svg-icon "+this.className:"svg-icon"},styleExternalIcon:function(){return{mask:"url(".concat(this.iconClass,") no-repeat 50% 50%"),"-webkit-mask":"url(".concat(this.iconClass,") no-repeat 50% 50%")}}}},a=i,o=(n("e5c3"),n("ad2c")),u=Object(o["a"])(a,r,c,!1,null,"e08fc41e",null);e["a"]=u.exports},d3b8:function(t,e,n){"use strict";var r=n("083c");t.exports=function(){var t=r(this),e="";return t.hasIndices&&(e+="d"),t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.unicodeSets&&(e+="v"),t.sticky&&(e+="y"),e}},d62a:function(t,e,n){"use strict";var r=n("a86f"),c=n("155d"),s=n("b1de"),i=n("d3b8"),a=n("bb37"),o=n("dcb7"),u=n("47a4"),l=n("c835").get,f=n("95bf"),d=n("90e0"),v=o("native-string-replace",String.prototype.replace),p=RegExp.prototype.exec,g=p,x=c("".charAt),h=c("".indexOf),m=c("".replace),b=c("".slice),_=function(){var t=/a/,e=/b*/g;return r(p,t,"a"),r(p,e,"a"),0!==t.lastIndex||0!==e.lastIndex}(),E=a.BROKEN_CARET,I=void 0!==/()??/.exec("")[1],C=_||I||E||f||d,R=function(t,e){for(var n=t.groups=u(null),r=0;r<e.length;r++){var c=e[r];n[c[0]]=t[c[1]]}};C&&(g=function(t){var e,n,c,a=this,o=l(a),u=s(t),f=o.raw;if(f)return f.lastIndex=a.lastIndex,e=r(g,f,u),a.lastIndex=f.lastIndex,e&&o.groups&&R(e,o.groups),e;var d=o.groups,C=E&&a.sticky,y=r(i,a),S=a.source,w=0,$=u;if(C){y=m(y,"y",""),-1===h(y,"g")&&(y+="g"),$=b(u,a.lastIndex);var k=a.lastIndex>0&&x(u,a.lastIndex-1);a.lastIndex>0&&(!a.multiline||a.multiline&&"\n"!==k&&"\r"!==k&&"\u2028"!==k&&"\u2029"!==k)&&(S="(?: (?:"+S+"))",$=" "+$,w++),n=new RegExp("^(?:"+S+")",y)}I&&(n=new RegExp("^"+S+"$(?!\\s)",y)),_&&(c=a.lastIndex);var O=r(p,C?n:a,$);return C?O?(O.input=u,O[0]=b(O[0],w),O.index=a.lastIndex,a.lastIndex+=O[0].length):a.lastIndex=0:_&&O&&(a.lastIndex=a.global?O.index+O[0].length:c),I&&O&&O.length>1&&r(v,O[0],n,(function(){for(var t=1;t<arguments.length-2;t++)void 0===arguments[t]&&(O[t]=void 0)})),O&&d&&R(O,d),O}),t.exports=g},e5c3:function(t,e,n){"use strict";n("6480")}}]);