@v2coding/ui 0.1.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@v2coding/ui",
+  "version": "0.1.0",
+  "description": "",
+
+  "main": "dist/v2coding-ui.ssr.js",
+  "browser": "dist/v2coding-ui.esm.js",
+  "module": "dist/v2coding-ui.esm.js",
+  "unpkg": "dist/v2coding-ui.min.js",
+
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.js",
+    "prebuild": "rimraf ./dist",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+  },
+
+  "dependencies": {
+  },
+
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "cross-env": "^7.0.3",
+    "minimist": "^1.2.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.52.8",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.14"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}

package/src/components/dialog/dialog.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-dialog v-dialogDrag v-bind="$attrs" :visible="visible" @update:visible="updateVisible" :width="width" :close-on-click-modal="closeOnClickModal" :destroy-on-close="destroyOnClose" @open="onOpen" :show-close="false" @opened="onOpened" @close="onClose" @closed="onClosed" ref="_dialog" class="ui-dialog">
+    <div v-if="title" slot="title" class="title">
+      {{ title }}
+      <span class="close" @click="close">
+        <i class="el-icon-close"></i>
+      </span>
+    </div>
+    <slot></slot>
+    <div v-if="buttons && buttons.length" slot="footer">
+      <el-button v-for="(button, index) in buttons" :key="index" size="medium" v-bind="button" @click="button.handle(close)">{{ button.text }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'ui-dialog',
+    props: {
+      title: String,
+      visible: Boolean,
+      width: {
+        type: String,
+        default: '600px',
+      },
+      // 默认取消按钮点击触发函数
+      cancel: {
+        type: Function,
+        default: (hide) => hide(),
+      },
+      closeOnClickModal: {
+        type: Boolean,
+        default: false,
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: true,
+      },
+      autoFocus: {
+        type: Boolean,
+        default: false,
+      },
+      // 默认确定按钮点击触发函数
+      confirm: {
+        type: Function,
+        default: (hide) => hide(),
+      },
+      /**
+       * {
+       *   text: '',          // required
+       *   handle: () => {},  // required
+       *   icon: '',          // optional
+       *   ... el-button`s options
+       * }
+       */
+      buttons: {
+        type: null,
+        default() {
+          return [
+            {text: '取消', icon: 'el-icon-error', handle: this.cancel},
+            {text: '确定', icon: 'el-icon-success', type: 'primary', handle: this.confirm},
+          ];
+        },
+      },
+    },
+    deactivated() {
+      this.close();
+    },
+    beforeDestroy() {
+      this.close();
+    },
+    methods: {
+      close() {
+        this.updateVisible(false);
+      },
+      updateVisible(visible) {
+        this.$emit('update:visible', visible);
+      },
+      onOpen() {
+        this.$emit('open');
+      },
+      onOpened() {
+        if (this.autoFocus) {
+          const input = this.$el.querySelector('input');
+          input && input.focus();
+        }
+        this.$emit('opened');
+      },
+      onClose() {
+        this.$emit('close');
+      },
+      onClosed() {
+        this.$emit('closed');
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+
+  .ui-dialog {
+
+    ::v-deep .el-dialog {
+      margin-bottom: 0;
+
+      .title {
+        position: relative;
+        line-height: 28px;
+        padding: 12px 48px 12px 24px;
+        word-break: keep-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-bottom: 1px solid #e8e8e8;
+        color: #202124;
+        font-weight: 500;
+        font-size: 16px;
+
+        .close {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 53px;
+          height: 53px;
+          display: inline-block;
+          text-align: center;
+          cursor: pointer;
+          transition: all 0.3s;
+          user-select: none;
+
+          &:hover {
+            color: var(--color-primary);
+          }
+
+          & > i {
+            font-size: 20px;
+            line-height: 53px;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-form .ui-form-fieldset:first-child {
+    margin-top: 0;
+  }
+
+  ::v-deep .el-form .ui-form-fieldset:last-child {
+    margin-bottom: 0;
+  }
+
+  ::v-deep .el-dialog__header {
+    padding: 0;
+    user-select: none;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding-bottom: 20px;
+  }
+
+  ::v-deep .el-dialog__footer {
+    padding: 10px 20px;
+    border-top: 1px solid #dcdfe6;
+  }
+
+  .el-dialog__footer .el-button {
+    border-radius: 2px;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>