free-fe-core-modules 0.0.1

package/components/Dialog/BasicDialog.vue

@@ -0,0 +1,442 @@
+<template>
+  <q-dialog
+    :persistent="persistent"
+    ref="dialog"
+  >
+    <q-card
+      :class="['basic-dialog-card', dialogClass]"
+      :style="`min-height: ${size.h}px;
+         width: ${size.w}px; min-width: ${size.w}`"
+    >
+      <q-btn
+        class="float-right close-dialog-button"
+        v-if="canClose"
+        :icon="closeIcon"
+        flat
+        v-close-popup
+        @click="btnCancel"
+      />
+
+      <q-card-section class="column items-center">
+        <e-icon
+          v-if="type"
+          class="dialog-icon"
+          :name="icon || type"
+          alt=""
+        />
+        <div
+          v-if="content"
+          class="title"
+        >{{ content }}</div>
+        <div
+          v-if="tips"
+          class="tips"
+        >{{ tips }}</div>
+        <!-- <div
+          v-if="warning"
+          class="warning"
+        >{{ warning }}</div> -->
+        <div
+          v-if="warning"
+          class="warning no-wrap"
+        >
+          <span class="warning-icon"></span>
+          <span class="warning-icon-sign-top"></span>
+          <span class="warning-icon-sign-dot"></span>
+          <span class="warning-text ellipsis">{{warning}}</span>
+        </div>
+
+        <q-input
+          v-if="needText"
+          hide-bottom-space
+          class="full-width"
+          :placeholder="text_label"
+          :maxlength="max_text_length"
+          v-model="textContent"
+          :rows="max_text_length / 20"
+          :class="textValid ? '' : 'invalid'"
+          type="textarea"
+        >
+        </q-input>
+        <span v-if="needText">{{ textContent.length }}/{{ max_text_length }}</span>
+        <div
+          v-if="fields && fields.length"
+          :class="fieldsClass || ''"
+        >
+          <free-field
+            :class="field.class || ''"
+            v-for="(field, index) in fields"
+            :key="index"
+            :Field="field"
+            :values="fieldsData"
+            :ref="`input_field_validator_${index}`"
+            @input="onInputFieldInput(field)"
+          ></free-field>
+        </div>
+        <slot name="fields"></slot>
+      </q-card-section>
+
+      <q-card-actions
+        align="center"
+        class="action-buttons full-width absolute"
+        v-if="canOK || canCancel"
+      >
+        <q-btn
+          :label="cancelText"
+          class="cancel-btn"
+          v-close-popup
+          @click="btnCancel"
+          v-if="canCancel"
+        />
+        <q-btn
+          v-if="canOK"
+          :label="okText"
+          class="ok-btn"
+          :class="disabled ? 'disabled-ok-btn' : ''"
+          :disabled="disabled"
+          @click="onOKClick"
+        >
+          <span v-if="timeLeft">({{ timeLeft }}s)</span>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import mixins from 'free-fe-mixins';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'BasicDialog',
+  mixins: [mixins.InputFieldValidator],
+  emits: ['hide', 'ok', 'cancel'],
+  props: {
+    persistent: { type: Boolean, default: true },
+    type: { type: String, default: 'info' },
+    icon: { type: String, default: '' },
+    textAlign: { type: String, default: 'center' },
+    content: { type: String, default: '' },
+    tips: { type: String, default: '' },
+    size: {
+      type: Object,
+      default: () => ({
+        h: 100,
+        w: 550,
+      }),
+    },
+    needText: { type: Boolean, default: false },
+    text_label: { type: String, default: '' },
+    max_text_length: { type: Number, default: 100 },
+    canOK: { type: Boolean, default: true },
+    canCancel: { type: Boolean, default: false },
+    canClose: { type: Boolean, default: false },
+    closeIcon: { type: String, default: 'far fa-times-circle' },
+    cancelText: { type: String, default: 'Cancel' },
+    cancelType: { type: String, default: '' },
+    okDisabled: { type: Boolean, default: false },
+    okText: { type: String, default: 'OK' },
+    okType: { type: String, default: '' },
+    timeout: { type: Number, default: 0 },
+    showWarning: { type: Boolean, default: true },
+    warning: { type: String, default: '' },
+    // validateFunc: {
+    //   type: Function,
+    //   default: () => true,
+    // },
+    visible: { type: Boolean, default: true },
+    fields: { type: Array, default: () => ([]) },
+    fieldsData: { type: Object, default: () => ({}) },
+    fieldsClass: { type: String, default: '' },
+    dialogClass: { type: String, default: '' },
+  },
+  data() {
+    return {
+      timeLeft: 0,
+      textContent: '',
+      textValid: true,
+      timer: undefined,
+      promise: '',
+      resolve: '',
+      reject: '',
+    };
+  },
+  // created() {
+  //   if (this.visible) {
+  //     this.show();
+  //   } else {
+  //     this.hide();
+  //   }
+  // },
+  watch: {
+    visible() {
+      if (this.visible) {
+        this.timeout_counter();
+        this.show();
+      } else {
+        this.hide();
+      }
+    },
+  },
+  computed: {
+    disabled() {
+      if (typeof this.okDisabled === 'object') {
+        return this.okDisabled.value;
+      }
+
+      return this.okDisabled;
+    },
+    warningMsg() {
+      // 设置默认warning
+      if (!this.showWarning) return '';
+
+      if (!this.warning) {
+        return '';
+      }
+      return this.warning;
+    },
+  },
+  methods: {
+    // following method is REQUIRED
+    // (don't change its name --> "show")
+    show() {
+      debugger
+      this.$refs.dialog.show();
+      this.timeout_counter();
+
+      this.promise = new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+
+      return this.promise;
+    },
+
+    // following method is REQUIRED
+    // (don't change its name --> "hide")
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onDialogHide() {
+      // required to be emitted
+      // when QDialog emits "hide" event
+      this.$emit('hide');
+    },
+    onOKClick() {
+      // on OK, it is REQUIRED to
+      // emit "ok" event (with optional payload)
+      // before hiding the QDialog
+      // this.$emit('ok');
+      // or with payload: this.$emit('ok', { ... })
+
+      // // validate
+      // if (this.validateFunc && typeof this.validateFunc === 'function') {
+      //   // now we only have such content, but later we might will have more
+      //   this.textValid = this.validateFunc(this.textContent);
+      //   if (!this.textValid) return;
+      // }
+      if (!this.validate()) {
+        return;
+      }
+
+      this.$emit('ok');
+
+      if (this.timer) {
+        this.timeLeft = 0;
+        clearInterval(this.timer);
+      }
+
+      if (this.resolve) {
+        if (this.needText) {
+          this.resolve(this.textContent);
+        } else {
+          this.resolve('confirm');
+        }
+
+        this.hide();
+        this.remove();
+      }
+    },
+    // show_msg_box() {
+    //   this.show();
+    //   this.promise = new Promise((resolve, reject) => {
+    //     this.resolve = resolve;
+    //     this.reject = reject;
+    //   });
+
+    //   return this.promise;
+    // },
+    btnCancel() {
+      this.$emit('cancel');
+
+      if (this.timer) {
+        this.timeLeft = 0;
+        clearInterval(this.timer);
+      }
+
+      if (this.reject) {
+        this.reject('cancel');
+        this.remove();
+      }
+    },
+    btn_ok() {
+      // // validate
+      // if (this.validateFunc && typeof this.validateFunc === 'function') {
+      //   // now we only have such content, but later we might will have more
+      //   this.textValid = this.validateFunc(this.textContent);
+      //   if (!this.textValid) return;
+      // }
+      if (!this.validate()) {
+        return;
+      }
+
+      this.$emit('ok');
+
+      if (this.timer) {
+        this.timeLeft = 0;
+        clearInterval(this.timer);
+      }
+
+      if (this.resolve) {
+        if (this.needText) {
+          this.resolve(this.textContent);
+        } else {
+          this.resolve('confirm');
+        }
+
+        this.hide();
+        this.remove();
+      }
+    },
+    timeout_counter() {
+      if (!this.timeout) {
+        return;
+      }
+
+      this.timeLeft = this.timeout;
+      this.timer = setInterval(() => {
+        this.timeLeft -= 1;
+        if (this.timeLeft < 1) {
+          clearInterval(this.timer);
+          this.btn_ok();
+        }
+      }, 1000);
+    },
+    remove() {
+      this.$destroy();
+      document.body.removeChild(this.$el);
+    },
+    onInputFieldInput(field){
+      if(field.onInput) {
+        field.onInput(field);
+      }
+    }
+  },
+});
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+.basic-dialog-card {
+  // min-height: 200px;
+  min-width: 480px;
+
+  .close-dialog-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 36px;
+    z-index: 1;
+  }
+}
+
+.q-dialog__inner--minimized > div {
+  max-width: unset;
+}
+
+.dialog-icon {
+  position: relative;
+  top: 0;
+  left: calc(50% - 26px);
+  padding: 0;
+  width: 52px;
+  height: 52px;
+  margin-top: 18px;
+  margin-bottom: 24px;
+}
+
+.title {
+  position: relative;
+  width: 100%;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  margin: 10px auto;
+}
+
+.cancel-btn {
+  margin-right: 20px;
+}
+
+.tips {
+  display: block;
+  position: relative;
+  margin-top: 10px;
+  font-size: 12px;
+  color: gray;
+  text-align: center;
+}
+
+.warning {
+  display: block;
+  position: relative;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+  color: red;
+}
+
+// .admin {
+//   margin-top: 10px;
+//   text-align: center;
+//   color: red;
+//   font-size: 12px;
+// }
+
+// .cancel-btn {
+//   background: rgba(255, 255, 255, 1);
+//   border: 1px solid rgba(74, 74, 74, 1);
+//   color: rgba(74, 74, 74, 1);
+// }
+
+// .cancel-btn:hover {
+//   background: rgba(0, 69, 156, 1);
+//   color: rgba(255, 255, 255, 1);
+//   border: 0;
+// }
+
+// .disabled-cancel-btn {
+//   background: rgba(255, 255, 255, 1);
+//   border: 1px solid rgba(155, 155, 155, 1);
+//   color: rgba(155, 155, 155, 1);
+// }
+
+// .ok-btn {
+//   background: rgba(24, 115, 220, 1);
+//   color: rgba(255, 255, 255, 1);
+// }
+
+// .ok-btn:hover {
+//   background: rgba(0, 69, 156, 1);
+//   color: rgba(255, 255, 255, 1);
+// }
+
+// .disabled-ok-btn {
+//   background: rgba(155, 155, 155, 1);
+//   color: rgba(255, 255, 255, 1);
+// }
+
+// .disabled-ok-btn:hover {
+//   background: rgba(155, 155, 155, 1);
+//   color: rgba(255, 255, 255, 1);
+// }
+</style>

package/components/Dialog/index.js

@@ -0,0 +1,38 @@
+import { createApp } from 'vue'
+import BasicDialog from './BasicDialog.vue';
+
+let $inst
+// 创建挂载实例
+let createMount = (opts) => {
+  const app = createApp(BasicDialog, {
+    ...opts, modelValue: true,
+    remove () {
+      app.unmount(mountNode)
+      document.body.removeChild(mountNode)
+    }
+  })
+  return app.mount('#eis-dialog')
+}
+
+function MsgDialog (options = {}) {
+  if (typeof options === 'string') {
+    options = {content: options};
+  }
+
+  $inst = createMount(options)
+
+  return $inst.show()
+    .then((val) => {
+      return Promise.resolve(val);
+    })
+    .catch((err) => {
+      return Promise.reject(err);
+    });
+}
+
+MsgDialog.install = (app) => {
+  app.config.globalProperties.$MsgDialog = MsgDialog;
+  // app.provide('MsgDialog', MsgDialog)
+}
+
+export default MsgDialog;

package/components/Dialog/index1.js

@@ -0,0 +1,49 @@
+import {createApp} from 'vue';
+import BasicDialog from './BasicDialog.vue';
+
+let _i18n = null;
+
+export function setI18n (i18n) {
+  _i18n = i18n
+}
+
+const MsgDialog = {};
+MsgDialog.install = (app) => {
+  // const MessageDialogInstance = app.extend(BasicDialog);
+  // const MessageDialogInstance = createApp(BasicDialog);
+
+  let MsgDialogInstance;
+  const init = () => {
+    // app.config.globalProperties._i18n = _i18n;
+
+    // MsgDialogInstance = new MessageDialogInstance();
+    MsgDialogInstance = createApp(BasicDialog);
+    MsgDialogInstance = MsgDialogInstance.mount('#eis-dialog');
+    // document.body.appendChild(msgBoxEl);
+  };
+
+  app.config.globalProperties.$MsgDialog = (options) => {
+    if (!MsgDialogInstance) {
+      init();
+    }
+
+    if (typeof options === 'string') {
+      MsgDialogInstance.content = options;
+    } else if (typeof options === 'object') {
+      Object.assign(MsgDialogInstance.$props, options);
+    }
+
+    // return MsgDialogInstance.show_msg_box()
+    return MsgDialogInstance.show()
+      .then((val) => {
+        MsgDialogInstance = null;
+        return Promise.resolve(val);
+      })
+      .catch((err) => {
+        MsgDialogInstance = null;
+        return Promise.reject(err);
+      });
+  };
+};
+
+export default MsgDialog;

package/components/FloatingWindow/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div
+    class="z-max"
+    id="adbox"
+    ref="adbox"
+    v-show="showAdbox && img"
+    @mouseenter="enterbox"
+    @mouseleave="leavebox"
+    @click="boxClicked"
+  >
+    <q-img :src="`${ctx.config.imageUrlBase}${img}`"></q-img>
+    <q-btn @click.stop="closebox" flat class="no-shadow" icon="close"></q-btn>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'FloatingWindow',
+  props: {
+    url: { type: String, default: '' },
+    img: { type: String, default: '' },
+    onlyIn: { type: Array, default: () => [] },
+    top: { type: Number, default: 0 },
+  },
+  data() {
+    return {
+      x: 150,
+      y: 150,
+      xin: true,
+      yin: true,
+      step: 1,
+      delay: 15,
+      itl: null,
+      showAdbox: true,
+    };
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      vm.routeEnterShowAdbox();
+    });
+  },
+  beforeUnmount() {
+    clearInterval(this.itl);
+  },
+  mounted() {
+    this.leavebox();
+  },
+  methods: {
+    boxClicked() {
+      if (this.url) {
+        if (/^(http|https):\/\/.*/.test(this.url)) {
+          window.open(this.url);
+        } else {
+          this.$router.push(this.url);
+        }
+      }
+    },
+    closebox() {
+      this.showAdbox = false;
+      clearInterval(this.itl);
+    },
+    leavebox() {
+      if (this.showAdbox === false) {
+        clearInterval(this.itl);
+      } else {
+        this.itl = setInterval(this.movebox, this.delay);
+      }
+    },
+    enterbox() {
+      clearInterval(this.itl);
+    },
+    movebox() {
+      const L = 0;
+      const T = this.top;
+      // 浏览器显示宽度-adbox宽度，不随滚动条变化而变化
+      const R = document.documentElement.clientWidth - this.$refs.adbox.offsetWidth;
+      // 浏览器显示高度-adbox高度，不随滚动条变化而变化
+      const B = document.documentElement.clientHeight - this.$refs.adbox.offsetHeight;
+      this.$refs.adbox.style.left = `${this.x
+        + document.documentElement.scrollLeft}px`; // adbox初始左+滚动条最左端到浏览器最左端的距离
+      this.$refs.adbox.style.top = `${this.y
+        + document.documentElement.scrollTop}px`; // adbox初始高+滚动条顶端到浏览器顶端的距离
+      this.x += this.step * (this.xin ? 1 : -1);
+      if (this.x < L) {
+        this.xin = true;
+        this.x = L;
+      }
+      if (this.x > R) {
+        this.xin = false;
+        this.x = R;
+      }
+      this.y += this.step * (this.yin ? 1 : -1);
+      if (this.y < T) {
+        this.yin = true;
+        this.y = T;
+      }
+      if (this.y > B) {
+        this.yin = false;
+        this.y = B;
+      }
+    },
+    routeEnterShowAdbox() {
+      this.itl = setInterval(this.movebox, this.delay);
+    },
+  },
+});
+</script>
+
+<style lang="sass">
+#adbox
+  width: 300px
+  height: 150px
+  position: absolute
+  cursor: pointer
+
+  & img
+    border: none
+
+  & .q-btn
+    position: absolute
+    height: 24px
+    width: 24px
+    font-size: 14px
+    line-height: 24px
+    padding: 0
+    margin: 0
+    right: 5px
+    top: 5px
+    cursor: pointer
+    color: $grey-4
+    background: rgba(0,0,0,0.2)
+    & .q-btn__wrapper
+      padding: 0
+      min-height: 1em
+    &:hover
+      color: $grey-5
+      background: $grey-9
+</style>

package/components/SelectLocales/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <q-btn flat :icon="icon" v-if="locales && locales[1]">
+    <q-menu>
+      <q-list>
+        <q-item
+          v-for="(locale, index) in locales"
+          :key="index"
+          clickable
+          v-close-popup
+          @click="localeChanged(locale.locale)"
+        >
+          <q-item-section>{{locale.name}}</q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+<script>
+import { defineComponent } from 'vue';
+import useAppStore from '@/stores/app';
+
+export default defineComponent({
+  name: 'SelectLocales',
+  props: {
+    icon: { type: String, default: 'translate' },
+  },
+  computed: {
+    locales() {
+      return (this.ctx && this.ctx.config.locales) || [];
+    },
+  },
+  created() {
+    // set the default locale
+    // if (this.locales && this.locales.length > 0) {
+    //   this.$i18n.locale = this.locales[0].locale;
+    // }
+  },
+  methods: {
+    localeChanged(l){
+      const store = useAppStore();
+
+      this.$i18n.locale = l;
+      store.SET_LOCALE(l);
+    }
+  }
+});
+</script>