misp-ui-library-test 0.0.1

package/src/packages/dialog/src/main.vue

@@ -0,0 +1,336 @@
+<template>
+  <transition
+    name="ui-dialog-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave"
+  >
+    <div
+      v-show="dialogVisible"
+      class="ui-dialog__wrapper"
+      :class="{ 'is-with-modal': modal }"
+      @click.self="handleWrapperClick"
+    >
+      <div
+        role="dialog"
+        :key="key"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
+        :class="[
+          'ui-dialog',
+          {
+            'is-fullscreen': fullscreen,
+            'ui-dialog--center': center
+          },
+          size ? 'ui-dialog--' + size : '',
+          customClass
+        ]"
+        ref="dialog"
+        :style="style"
+      >
+        <div class="ui-dialog__header">
+          <div class="ui-dialog__header-content">
+            <slot name="title-icon"></slot>
+            <slot name="title">
+              <span class="ui-dialog__title">{{ title }}</span>
+            </slot>
+          </div>
+          <button
+            type="button"
+            class="ui-dialog__headerbtn"
+            :class="{ 'is-disabled': !closePermission }"
+            aria-label="Close"
+            v-if="showClose"
+            @click="handleClose"
+          >
+            <i class="ui-dialog__close ui-icon-close"></i>
+          </button>
+        </div>
+        <div class="ui-dialog__body" v-if="rendered">
+          <slot>
+            <div class="ui-dialog__message" v-if="message">
+              {{ message }}
+            </div>
+          </slot>
+        </div>
+        <div class="ui-dialog__footer" v-if="$slots.footer || hasCancel || hasConfirm">
+          <slot name="footer">
+            <ui-button v-if="hasCancel" size="small" @click="cancelHandler">
+              {{ cancelBtnText || t('components.messageBox.cancel') || '取消' }}
+            </ui-button>
+            <ui-button v-if="hasConfirm" type="primary" size="small" @click="confirmHandler">
+              {{ confirmBtnText || t('components.messageBox.confirm') || '确定' }}
+            </ui-button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Emitter from '../../../mixins/emitter';
+import Popup from '../../../utils/popper/popup';
+import locale from '../../../mixins/locale';
+
+/**
+ * Dialog 对话框组件
+ * @description 在保留当前页面状态的情况下，在此弹窗中进行操作。
+ * @property {Boolean} visible - 是否显示 Dialog，支持 .sync 修饰符和 v-model
+ * @property {String} title - Dialog 的标题，也可通过具名 slot 传入
+ * @property {String} message - 弹窗内文，支持字符串
+ * @property {String} width - Dialog 的宽度
+ * @property {Boolean} fullscreen - 是否为全屏 Dialog
+ * @property {String} top - Dialog CSS 中的 margin-top 值
+ * @property {Boolean} modal - 是否需要遮罩层
+ * @property {Boolean} append-to-body - Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
+ * @property {Boolean} lock-scroll - 是否在 Dialog 出现时将 body 滚动锁定
+ * @property {String} custom-class - Dialog 的自定义类名
+ * @property {Boolean} close-on-click-modal - 是否可以通过点击 modal 关闭 Dialog
+ * @property {Boolean} close-on-press-escape - 是否可以通过按下 ESC 关闭 Dialog
+ * @property {Boolean} show-close - 是否显示关闭按钮
+ * @property {Function} before-close - 关闭前的回调，会暂停 Dialog 的关闭
+ * @property {Boolean} center - 是否对头部和底部采用居中布局
+ * @property {Boolean} destroy-on-close - 关闭时销毁 Dialog 中的元素
+ * @property {String} cancelBtnText - 取消按钮文字
+ * @property {String} confirmBtnText - 确定按钮文字
+ * @property {Boolean} hasCancel - 是否显示取消按钮
+ * @property {Boolean} hasConfirm - 是否显示确定按钮
+ * @property {Boolean} closePermission - 是否允许关闭
+ */
+export default {
+  name: 'UiDialog',
+
+  mixins: [Emitter, Popup, locale],
+
+  model: {
+    prop: 'visible',
+    event: 'visible-change'
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+
+    title: {
+      type: String,
+      default: ''
+    },
+
+    message: {
+      type: String,
+      default: ''
+    },
+
+    modal: {
+      type: Boolean,
+      default: true
+    },
+
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+
+    width: String,
+
+    fullscreen: Boolean,
+
+    customClass: {
+      type: String,
+      default: ''
+    },
+
+    top: {
+      type: String,
+      default: '15vh'
+    },
+
+    beforeClose: Function,
+
+    center: {
+      type: Boolean,
+      default: false
+    },
+
+    size: {
+      type: String,
+      validator(val) {
+        return ['small', 'large', 'mini'].indexOf(val) > -1;
+      }
+    },
+
+    destroyOnClose: Boolean,
+
+    cancelBtnText: String,
+    confirmBtnText: String,
+    hasCancel: Boolean,
+    hasConfirm: Boolean,
+    closePermission: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      closed: false,
+      key: 0,
+      echoFunc: null,
+      echoOnConfirm: true,
+      dialogVisible: false
+    };
+  },
+
+  watch: {
+    visible: {
+      handler(val) {
+        this.dialogVisible = val;
+      },
+      immediate: true
+    },
+
+    dialogVisible(val) {
+      if (val) {
+        this.rendered = true;
+        this.closed = false;
+        this.$emit('open');
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
+        this.$nextTick(() => {
+          if (this.$refs.dialog) {
+            this.$refs.dialog.scrollTop = 0;
+          }
+        });
+        // 显式触发 Popup mixin 的打开逻辑，以兼容 open() 命令式调用
+        if (typeof Popup.methods.open === 'function') {
+          Popup.methods.open.call(this);
+        }
+      } else {
+        if (!this.closed) this.$emit('close');
+        // 显式触发 Popup mixin 的关闭逻辑
+        if (typeof Popup.methods.close === 'function') {
+          Popup.methods.close.call(this);
+        }
+      }
+      this.$emit('update:visible', val);
+      this.$emit('visible-change', val);
+    }
+  },
+
+  computed: {
+    style() {
+      let style = {};
+      if (!this.fullscreen) {
+        style.marginTop = this.top;
+        if (this.width) {
+          style.width = this.width;
+        }
+      }
+      return style;
+    }
+  },
+
+  methods: {
+    open(cb, onConfirm = true) {
+      this.echoFunc = cb;
+      this.echoOnConfirm = onConfirm;
+      this.dialogVisible = true;
+    },
+
+    handleWrapperClick() {
+      if (!this.closeOnClickModal) return;
+      this.handleClose();
+    },
+
+    handleClose() {
+      if (!this.closePermission) return;
+      if (typeof this.beforeClose === 'function') {
+        this.beforeClose(this.hide);
+      } else {
+        this.hide();
+      }
+    },
+
+    cancelHandler() {
+      if (!this.closePermission) return;
+      this.hide();
+      if (!this.echoOnConfirm && typeof this.echoFunc === 'function') {
+        this.echoFunc();
+      } else {
+        this.$emit('manual-close', this.echoFunc);
+      }
+    },
+
+    confirmHandler() {
+      this.hide();
+      if (this.echoOnConfirm && typeof this.echoFunc === 'function') {
+        this.echoFunc();
+      } else {
+        this.$emit('confirm', this.echoFunc);
+      }
+    },
+
+    hide(cancel) {
+      if (cancel !== false) {
+        this.dialogVisible = false;
+        this.closed = true;
+      }
+    },
+
+    updatePopper() {
+      this.broadcast('UiSelectDropdown', 'updatePopper');
+      this.broadcast('UiDropdownMenu', 'updatePopper');
+    },
+
+    afterEnter() {
+      this.$emit('opened');
+    },
+
+    afterLeave() {
+      this.$emit('closed');
+      if (this.destroyOnClose) {
+        this.key++;
+      }
+    }
+  },
+
+  mounted() {
+    if (this.dialogVisible) {
+      this.rendered = true;
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el);
+      }
+    }
+  },
+
+  beforeDestroy() {
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+  }
+};
+</script>
+

package/src/packages/divider/index.js

@@ -0,0 +1,12 @@
+/**
+ * Divider 分割线组件
+ */
+
+import UiDivider from './src/main.vue'
+
+// 自动安装
+UiDivider.install = function(Vue) {
+  Vue.component(UiDivider.name, UiDivider)
+}
+
+export default UiDivider

package/src/packages/divider/src/main.vue

@@ -0,0 +1,37 @@
+<template functional>
+  <div
+    v-bind="data.attrs"
+    v-on="listeners"
+    :class="[data.staticClass, 'ui-divider', `ui-divider--${props.direction}`]"
+  >
+    <div
+      v-if="slots().default && props.direction !== 'vertical'"
+      :class="['ui-divider__text', `is-${props.contentPosition}`]"
+     >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiDivider',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val) {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1;
+      }
+    },
+    contentPosition: {
+      type: String,
+      default: 'center',
+      validator(val) {
+        return ['left', 'center', 'right'].indexOf(val) !== -1;
+      }
+    }
+  }
+};
+
+</script>

package/src/packages/drawer/index.js

@@ -0,0 +1,7 @@
+import UiDrawer from './src/main.vue'
+
+UiDrawer.install = function(Vue) {
+  Vue.component(UiDrawer.name, UiDrawer)
+}
+
+export default UiDrawer

package/src/packages/drawer/src/main.vue

@@ -0,0 +1,310 @@
+<template>
+  <transition
+    name="ui-drawer-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave">
+    <div
+      v-show="visible"
+      class="ui-drawer__wrapper"
+      tabindex="-1"
+      @click="handleWrapperClick"
+      role="presentation">
+      <div
+        v-if="modal"
+        class="ui-drawer__mask"
+        :style="{ zIndex: zIndex }"
+      ></div>
+      <div
+        class="ui-drawer"
+        :class="[
+          'ui-drawer--' + direction,
+          customClass
+        ]"
+        :style="drawerStyle"
+        ref="drawer"
+        role="dialog"
+        :aria-modal="true"
+        aria-labelledby="ui-drawer__title"
+        @click.stop
+      >
+        <div class="ui-drawer__header" v-if="withHeader">
+          <slot name="title">
+            <span
+              id="ui-drawer__title"
+              class="ui-drawer__title"
+              role="heading"
+              :title="title"
+            >{{ title }}</span>
+          </slot>
+          <button
+            v-if="showClose"
+            type="button"
+            class="ui-drawer__close-btn"
+            @click="closeDrawer"
+            aria-label="close"
+          >
+            <i class="ui-drawer__close ui-icon-close"></i>
+          </button>
+        </div>
+        <section class="ui-drawer__body" v-if="rendered">
+          <slot></slot>
+        </section>
+        <div class="ui-drawer__footer" v-if="$slots.footer || (hasCancel || hasConfirm)">
+          <slot name="footer">
+            <div class="ui-drawer__footer-buttons">
+              <ui-button v-if="hasCancel" size="small" @click="handleCancel">{{ cancelBtnText || t('components.messageBox.cancel') || '取消' }}</ui-button>
+              <ui-button v-if="hasConfirm" type="primary" size="small" :loading="confirmLoading" :disabled="!completed" @click="handleConfirm">{{ confirmBtnText || t('components.messageBox.confirm') || '确定' }}</ui-button>
+            </div>
+          </slot>
+        </div>
+      </div>
+      <!-- 二次确认弹窗 -->
+      <ui-dialog
+        v-if="hasCancelConfirm"
+        ref="confirmDialog"
+        size="small"
+        :title="cancelConfirmTitle || t('components.messageBox.confirm') || '提示'"
+        :message="cancelConfirmMessage || t('components.drawer.cancelConfirm') || '确认关闭？未保存的数据可能丢失。'"
+        :cancel-btn-text="t('components.drawer.continueEditing') || '继续编辑'"
+        :confirm-btn-text="t('components.drawer.notSave') || '不保存'"
+        :has-cancel="true"
+        :has-confirm="true"
+        append-to-body
+      />
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from '../../../utils/popper/popup';
+import UiButton from '../../button';
+import UiDialog from '../../dialog';
+import locale from '../../../mixins/locale';
+
+export default {
+  name: 'UiDrawer',
+
+  mixins: [Popup, locale],
+
+  components: {
+    UiButton,
+    UiDialog
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    direction: {
+      type: String,
+      default: 'rtl',
+      validator: value => ['ltr', 'rtl', 'ttb', 'btt'].indexOf(value) > -1
+    },
+    size: {
+      type: [String, Number],
+      default: '30%'
+    },
+    withHeader: {
+      type: Boolean,
+      default: true
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    modalAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    beforeClose: {
+      type: Function
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    zIndex: {
+      type: Number
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: false
+    },
+    // ---- Merged from MispDrawer ----
+    completed: {
+      type: Boolean,
+      default: true
+    },
+    confirmLoading: {
+      type: Boolean,
+      default: false
+    },
+    hasCancel: {
+      type: Boolean,
+      default: false
+    },
+    hasConfirm: {
+      type: Boolean,
+      default: false
+    },
+    cancelBtnText: {
+      type: String,
+      default: ''
+    },
+    confirmBtnText: {
+      type: String,
+      default: ''
+    },
+    hasCancelConfirm: {
+      type: Boolean,
+      default: false
+    },
+    cancelConfirmTitle: {
+      type: String,
+      default: ''
+    },
+    cancelConfirmMessage: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+    drawerStyle() {
+      const style = {};
+      const isHorizontal = this.direction === 'rtl' || this.direction === 'ltr';
+      
+      let sizeStr = this.size;
+      if (typeof this.size === 'number') {
+        sizeStr = `${this.size}px`;
+      } else {
+        const sizeMap = {
+          large: '50%',
+          medium: '40%',
+          small: '30%'
+        };
+        if (sizeMap[this.size]) {
+          sizeStr = sizeMap[this.size];
+        }
+      }
+
+      if (isHorizontal) {
+        style.width = sizeStr;
+      } else {
+        style.height = sizeStr;
+      }
+      return style;
+    }
+  },
+
+  watch: {
+    visible(val) {
+      if (val) {
+        this.$emit('open');
+      } else {
+        this.$emit('close');
+      }
+    }
+  },
+
+  methods: {
+    afterEnter() {
+      this.$emit('opened');
+    },
+    afterLeave() {
+      this.$emit('closed');
+      if (this.destroyOnClose) {
+        this.rendered = false;
+      }
+    },
+    hide(cancel) {
+      if (cancel !== false) {
+        this.$emit('update:visible', false);
+      }
+    },
+    handleClose() {
+      const close = () => {
+        if (typeof this.beforeClose === 'function') {
+          this.beforeClose(this.hide);
+        } else {
+          this.hide();
+        }
+        this.$emit('cancel');
+      };
+
+      if (this.hasCancelConfirm) {
+        if (this.$refs.confirmDialog && typeof this.$refs.confirmDialog.open === 'function') {
+          this.$refs.confirmDialog.open(() => {
+            close();
+          });
+        } else {
+          // Fallback if dialog is not available
+          close();
+        }
+      } else {
+        close();
+      }
+    },
+    closeDrawer() {
+      this.handleClose();
+    },
+    handleWrapperClick() {
+      if (this.closeOnClickModal) {
+        this.handleClose();
+      }
+    },
+    handleConfirm() {
+      this.$emit('confirm');
+    },
+    handleCancel() {
+      this.closeDrawer();
+    }
+  },
+
+  mounted() {
+    if (this.visible) {
+      this.rendered = true;
+    }
+    if (this.appendToBody) {
+      document.body.appendChild(this.$el);
+    }
+  },
+
+  beforeDestroy() {
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+  }
+};
+</script>
+

package/src/packages/dropdown/index.js

@@ -0,0 +1,12 @@
+/**
+ * Dropdown 组件
+ */
+
+import UiDropdown from './src/main.vue'
+
+// 自动安装
+UiDropdown.install = function(Vue) {
+  Vue.component(UiDropdown.name, UiDropdown)
+}
+
+export default UiDropdown