kz-ui-base 1.0.2 → 1.0.4

package/common/src/assets/styles/transition.scss

@@ -1,48 +0,0 @@
-// global transition css
-
-/* fade */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.28s;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-/* fade-transform */
-.fade-transform-leave-active,
-.fade-transform-enter-active {
-  transition: all .5s;
-}
-
-.fade-transform-enter {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-transform-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* breadcrumb transition */
-.breadcrumb-enter-active,
-.breadcrumb-leave-active {
-  transition: all .5s;
-}
-
-.breadcrumb-enter,
-.breadcrumb-leave-active {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.breadcrumb-move {
-  transition: all .5s;
-}
-
-.breadcrumb-leave-active {
-  position: absolute;
-}

package/common/src/assets/styles/variables.scss

@@ -1,52 +0,0 @@
-// base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
-
-// sidebar
-
-// 默认菜单主题风格
-$base-menu-color: #c5c5c8;                      //未关注菜单栏样式
-$base-menu-color-active: #ffffff;               //当前激活菜单上级菜单栏的文字颜色
-$base-menu-text-color-active: #ffffff;          //当前激活菜单的文字颜色
-$base-menu-background: #282c34;                 //主菜单栏背景
-$base-logo-title-color: #ffffff;                //标题样式
-
-$base-sub-menu-background: #000c17;             //子菜单栏背景
-$base-sub-menu-hover: #1890ff;                  //鼠标关注菜单栏
-
-// 白色菜单主题风格
-$base-menu-light-color:rgba(0,0,0,.70);         //未关注菜单栏样式
-$base-menu-light-text-color-active: #409EFF;    //当前激活菜单的文字颜色
-$base-menu-light-background:#ffffff;            //主菜单栏背景
-$base-logo-light-title-color: #001529;          //标题样式
-
-// 自定义暗色菜单风格
-//$base-menu-color:hsla(0,0%,100%,.65);
-//$base-menu-color-active:#fff;
-//$base-menu-background:#001529;
-//$base-logo-title-color: #ffffff;
-
-$base-sidebar-width: 200px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  menuColor: $base-menu-color;
-  menuLightColor: $base-menu-light-color;
-  menuColorActive: $base-menu-color-active;
-  menuLightColorActive: $base-menu-light-text-color-active;
-  menuTextColorActive: $base-menu-text-color-active;
-  menuBackground: $base-menu-background;
-  menuLightBackground: $base-menu-light-background;
-  subMenuBackground: $base-sub-menu-background;
-  subMenuHover: $base-sub-menu-hover;
-  sideBarWidth: $base-sidebar-width;
-  logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
-}

package/common/src/components/base/dialog/BaseDialog.vue

@@ -1,140 +0,0 @@
-<template>
-  <el-dialog
-    v-dialogDragHeight
-    v-dialogDrag
-    append-to-body
-    :close-on-click-modal="false"
-    :custom-class="`${customClass} custom-dialog`"
-    v-bind="$attrs"
-    :visible.sync="modalState"
-    v-on="$listeners"
-    @opened.once="handleOpened"
-  >
-    <slot class="base-dialog__slot" />
-
-    <div slot="footer" style="text-align: center">
-      <el-divider />
-      <div class="dialog-footer">
-        <slot name="footerButton" />
-        <el-button
-          v-if="showConfirm && !$slots.footerButton"
-          :loading="submitLoading"
-          size="small"
-          type="primary"
-          @click="handleConfirm"
-        >{{ confirmText }}
-        </el-button>
-        <el-button
-          size="small"
-          @click="handleClose"
-        >{{ cancelText }}
-        </el-button>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: 'BaseDialog',
-  props: {
-    showConfirm: {
-      type: Boolean,
-      default: true
-    },
-    confirmText: {
-      type: String,
-      default: '确定'
-    },
-    cancelText: {
-      type: String,
-      default: '关闭'
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    customClass: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['on-confirm', 'on-cancel', 'on-opened'],
-  data() {
-    return {
-      modalState: false,
-      submitLoading: false
-    }
-  },
-  watch: {
-    visible(val) {
-      this.modalState = val
-    }
-  },
-  methods: {
-    handleConfirm() {
-      this.$emit('on-confirm')
-    },
-    handleClose() {
-      this.$emit('on-cancel')
-    },
-    handleOpened() {
-      this.$emit('on-opened')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .custom-dialog {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 50%;
-  //left: 50%; // v-dialogDrag会设置left位置,所以只需要做垂直居中对齐即可
-  margin: 0 !important;
-  transform: translate(0, -50%);
-  max-height: calc(100% - 30px);
-  max-width: calc(100% - 30px);
-
-  .el-dialog__body {
-    overflow: auto;
-  }
-}
-
-::v-deep .el-dialog__title {
-  font-size: 16px;
-  font-weight: 500;
-}
-
-::v-deep .el-dialog__header {
-  padding: 16px 24px;
-}
-
-::v-deep .el-dialog__body {
-  padding: 0;
-  border-top: 1px solid #dcdfe6;
-  flex: 1;
-}
-
-::v-deep .el-dialog__footer {
-  padding: 0;
-  text-align: center;
-
-  .dialog-footer {
-    padding: 12px 0;
-  }
-}
-
-::v-deep .el-divider--horizontal {
-  margin: 0;
-}
-
-::v-deep .el-input.is-disabled .el-input__inner {
-  background-color: #f8f8f8;
-  border-color: #ebebeb;
-  color: rgba(0, 0, 0, 0.65);
-  font-weight: 400;
-  cursor: not-allowed;
-}
-</style>

package/common/src/components/base/dialog/Dialog.js

@@ -1,118 +0,0 @@
-import Vue from "vue";
-
-function makeDialog(option) {
-  var dom = document.createElement("div");
-  document.getElementsByTagName("body")[0].appendChild(dom);
-  let tpl =
-    '\
-        <el-dialog \
-            ref="dialogtop"\
-            v-if="isShow"\
-            :close-on-click-modal="false" \
-            :custom-class="customClass" \
-            :title="setting.title || title" \
-            :visible="setting.isShow" \
-            :size="setting.size || \'large\'" \
-            :width = "setting.width || \'60%\'"\
-            :before-close="beforeClose" \
-             append-to-body \
-             v-dialogDrag="fixedTitle" \
-             v-dialogDragHeight="fixedTitle" \
-            @close="close">\
-                <dialogContent :setting.sync="setting" @change="onChangeEvent" @onCustomOpMenuClick="onCustomOpMenuClick" @onSaveClick="onSaveClick" @onCancelClick="onCancelClick" @close="onCancelClick" @confirm="onSaveClick" v-model="dialogData"></dialogContent>\
-        </el-dialog>';
-
-  var vue = new Vue({
-    el: dom,
-    data: function () {
-      return {
-        title: option.title,
-        setting: option.setting,
-        dialogData: option.data || option.setting.data,
-        isShow: true,
-        fixedTitle: true,
-      };
-    },
-    template: tpl,
-    computed: {
-      customClass() {
-        return `el-dialog--width-${option.size || "auto"} customDialog`;
-      },
-
-      //isShow() {
-      // console.log('isShow:' + this.setting.isShow);
-      // return this.setting.isShow;
-      //}
-    },
-    created() {
-      this.$nextTick(() => {
-        if (option.setting.height) {
-          this.$refs.dialogtop.$el.firstChild.style.height =
-            option.setting.height;
-        }
-        // if (option.setting.fixedTitle) {
-        //   this.$refs.dialogtop.$el.children[0].children[0].style.position =
-        //     "fixed";
-        //   //   this.$refs.dialogtop.$el.children[0].children[0].style.top = "2px";
-        //   this.$refs.dialogtop.$el.children[0].children[0].style.width =
-        //     "inherit";
-        //   this.$refs.dialogtop.$el.children[0].children[0].style["z-index"] =
-        //     "999";
-        //   this.$refs.dialogtop.$el.children[0].children[0].style[
-        //     "background-color"
-        //   ] = "#FFF";
-        // }
-
-        // console.log(this.$refs.dialogtop.$el.children[0].children[0].style.position='fixed');
-      });
-    },
-    methods: {
-      //��ǰ��ʵ���ֶ�ֵ����¼�
-      onChangeEvent(args) {
-        this.$emit("change", args);
-        //args:  { property: this.column.property, value: value, entity: this.entity, column: this.column }
-        //console.log(args);
-      },
-      beforeClose(done) {
-        if (option.beforeClose) {
-          option.beforeClose(done);
-        } else {
-          done();
-        }
-      },
-      close() {
-        this.isShow = false;
-        this.setting.isShow = false;
-        this.$forceUpdate();
-        if (option.close) {
-          option.close();
-        }
-      },
-      onCustomOpMenuClick() {},
-      onCancelClick() {
-        this.isShow = false;
-        this.setting.isShow = false;
-        this.close();
-      },
-      onSaveClick(result) {
-        this.isShow = false;
-        this.setting.isShow = false;
-        this.$forceUpdate();
-        option.onSaveClick && option.onSaveClick(result);
-        option.confirm && option.confirm(result);
-      },
-    },
-    components: {
-      dialogContent: option.component,
-    },
-  });
-  return vue;
-}
-
-export default {
-  open(options) {
-    options.isShow = true;
-    options.setting.isShow = true;
-    return makeDialog(options);
-  },
-};

package/common/src/components/base/dialog/dialogSetting.js

@@ -1,65 +0,0 @@
-import store from "@/store";
-
-export default (Vue, component) => {
-  const div = document.createElement("div");
-  const el = document.createElement("div");
-  div.appendChild(el);
-  document.body.appendChild(div);
-
-  const ComponentConstructor = Vue.extend(component);
-  return (propsData = {}, parent = undefined) => {
-    let instance = new ComponentConstructor({
-      store,
-      propsData,
-      parent,
-    }).$mount(el);
-
-    const destroyDialog = () => {
-      if (instance && div.parentNode) {
-        instance.$destroy();
-        instance = null;
-        div.parentNode && div.parentNode.removeChild(div);
-      }
-    };
-
-    const closeDialog = (time) => {
-      Vue.nextTick(() => {
-        instance["visible"] = false;
-      });
-    };
-
-    // visible控制
-    if (instance["visible"] !== undefined) {
-      // 支持sync/v-model
-      instance.$watch("visible", (val) => {
-        if (!val) {
-          // 添加延时,等待el-dialog关闭动画结束后
-          setTimeout(() => destroyDialog(), 1000);
-        }
-      });
-      Vue.nextTick(() => {
-        instance["visible"] = true;
-      });
-    }
-
-    const { confirm, cancel } = propsData;
-    instance.$once("done", (data) => {
-      confirm && confirm(data);
-      closeDialog();
-    });
-    instance.$once("cancel", (data) => {
-      cancel && cancel(data);
-      closeDialog();
-    });
-    instance.$once("lock-submit", () => {
-      Vue.nextTick(() => {
-        instance.$children[0]["submitLoading"] = true;
-      });
-    });
-    instance.$once("unlock-submit", () => {
-      Vue.nextTick(() => {
-        instance.$children[0]["submitLoading"] = false;
-      });
-    });
-  };
-};

package/common/src/components/base/dialog/dialogType.js

@@ -1,80 +0,0 @@
-import Vue from "vue";
-import dialog from "@components/base/dialog/Dialog";
-import router from "../../../../../main/src/router/index.js";
-Vue.prototype.dialog = dialog;
-const open = (options) => {
-  if (options.setting?.jumpUrl) {
-    router.push({
-      name: options.setting.jumpUrl
-        .toLowerCase()
-        .replace(/( |^)[a-z]/g, (L) => L.toUpperCase()),
-      params: options.setting,
-    });
-    return;
-  }
-  if (typeof options.component === "string") {
-    let component = options?.component;
-    options.component = (resolve) => {
-      require([`@/${component}`], resolve);
-    };
-  }
-  if (options?.setting?.showType == "menuTab") {
-    let url = new Date().getTime();
-    if (options.setting?.entityId) {
-      url = options.setting.entityId;
-    }
-    router.addRoute("tabmenu", {
-      path: `/tabmenu/${url}`,
-      component: (resolve) =>
-        require([`@/components/base/tabMenuRoute`], resolve),
-      name: url,
-      meta: {
-        title: options.setting.title,
-      },
-    });
-    router.push({
-      name: url,
-      params: { options },
-    });
-    return;
-  }
-  try {
-    // js
-    if (typeof options.component === "object") {
-      if (
-        options.component.hasOwnProperty("data") &&
-        typeof options.component.data == "function" &&
-        options.component.data().hasOwnProperty("dialogType") &&
-        String(options.component.data().dialogType) === "2"
-      ) {
-        Vue.prototype.openDialog(options.component)({
-          ...options,
-          ...options?.setting?.data,
-        });
-      } else {
-        Vue.prototype.dialog.open(options);
-      }
-
-      // ts
-    } else {
-      const ComponentClass = Vue.extend(options.component);
-      const instance = new ComponentClass();
-      instance.$mount();
-      if (String(instance.dialogType) === "2") {
-        Vue.prototype.openDialog(options.component)({
-          ...options,
-          ...options?.setting?.data,
-        });
-      } else {
-        Vue.prototype.dialog.open(options);
-      }
-    }
-  } catch (e) {
-    console.error(options.component, "弹窗error");
-    Vue.prototype.dialog.open(options);
-  }
-};
-
-export default {
-  open,
-};

package/common/src/components/base/dialog/index.js

@@ -1,42 +0,0 @@
-import OpenDialog from "./dialogSetting";
-import BaseDialog from "./BaseDialog";
-
-function install(Vue) {
-  if (install.installed) return;
-  install.installed = true;
-  Vue.prototype.openDialog = (comp) => OpenDialog(Vue, comp);
-
-  Vue.mixin({
-    methods: {
-      confirm(...args) {
-        this.$emit("done", ...args);
-      },
-      cancel(...args) {
-        this.$emit("cancel", ...args);
-      },
-      $unlockSubmit() {
-        this.$emit("unlock-submit");
-      },
-    },
-  });
-
-  Vue.component("BaseDialog", BaseDialog);
-}
-
-// auto plugin install
-let GlobalVue = null;
-if (typeof window !== "undefined") {
-  GlobalVue = window.Vue;
-} else if (typeof global !== "undefined") {
-  GlobalVue = global.vue;
-}
-if (GlobalVue) {
-  GlobalVue.use({
-    install,
-  });
-}
-
-// export default
-export default {
-  install,
-};