Global Services

/**
 * Global message service accessible via this.$message
 */
interface MessageService {
  (message: string, type?: string): MessageInstance;
  (options: MessageOptions): MessageInstance;
  success(message: string): MessageInstance;
  warning(message: string): MessageInstance;
  info(message: string): MessageInstance;
  error(message: string): MessageInstance;
  close(id?: string): void;
  closeAll(): void;
}

interface MessageOptions {
  message?: string;
  type?: 'success' | 'warning' | 'info' | 'error';
  iconClass?: string;
  dangerouslyUseHTMLString?: boolean;
  customClass?: string;
  duration?: number;
  showClose?: boolean;
  center?: boolean;
  onClose?: Function;
  offset?: number;
}

interface MessageInstance {
  close(): void;
}

// Component form of Message
const Message = Vue.component;

// Basic message usage
this.$message('This is a message.');
this.$message.success('This is a success message');
this.$message.warning('This is a warning message');
this.$message.info('This is an info message');
this.$message.error('This is an error message');

// Message with options
this.$message({
  message: 'Congrats, this is a success message.',
  type: 'success'
});

// HTML content (use with caution)
this.$message({
  dangerouslyUseHTMLString: true,
  message: '<strong>This is <i>HTML</i> string</strong>'
});

// Custom duration
this.$message({
  message: 'This message will disappear after 5 seconds',
  duration: 5000
});

// Centered message
this.$message({
  message: 'Centered text',
  center: true
});

// Closable message
this.$message({
  showClose: true,
  message: 'This is a closable message'
});

// Close specific message
const h = this.$message({
  message: 'Hello world!'
});
// Close manually
h.close();

// Close all messages
this.$message.closeAll();

// Import for standalone use
import { Message } from 'element-ui';
Message.success('Success message');

/**
 * Global notification service accessible via this.$notify
 */
interface NotificationService {
  (options: NotificationOptions): NotificationInstance;
  success(message: string, title?: string): NotificationInstance;
  success(options: NotificationOptions): NotificationInstance;
  warning(message: string, title?: string): NotificationInstance;
  warning(options: NotificationOptions): NotificationInstance;
  info(message: string, title?: string): NotificationInstance;
  info(options: NotificationOptions): NotificationInstance;
  error(message: string, title?: string): NotificationInstance;
  error(options: NotificationOptions): NotificationInstance;
  close(id: string): void;
  closeAll(): void;
}

interface NotificationOptions {
  title?: string;
  message?: string;
  type?: 'success' | 'warning' | 'info' | 'error';
  iconClass?: string;
  customClass?: string;
  duration?: number;
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  showClose?: boolean;
  onClose?: Function;
  onClick?: Function;
  offset?: number;
}

interface NotificationInstance {
  close(): void;
}

// Component form of Notification
const Notification = Vue.component;

// Basic notification
this.$notify({
  title: 'Title',
  message: 'This is a notification message'
});

// Type-specific notifications
this.$notify.success({
  title: 'Success',
  message: 'This is a success notification'
});

this.$notify.warning({
  title: 'Warning',
  message: 'This is a warning notification'
});

this.$notify.info({
  title: 'Info',
  message: 'This is an info notification'
});

this.$notify.error({
  title: 'Error',
  message: 'This is an error notification'
});

// Simplified success notification
this.$notify.success('Success message');
this.$notify.success('Success message', 'Title');

// Custom position
this.$notify({
  title: 'Custom Position',
  message: 'This notification appears in the top-left corner',
  position: 'top-left'
});

// Custom duration (0 means it won't close automatically)
this.$notify({
  title: 'Persistent Notification',
  message: 'This notification will not close automatically',
  duration: 0
});

// HTML content
this.$notify({
  title: 'HTML String',
  dangerouslyUseHTMLString: true,
  message: '<strong>This is <i>HTML</i> string</strong>'
});

// With callback
this.$notify({
  title: 'With Callback',
  message: 'Click to close',
  onClick: () => {
    console.log('Notification clicked');
  },
  onClose: () => {
    console.log('Notification closed');
  }
});

// Close specific notification
const notification = this.$notify({
  title: 'Title',
  message: 'Message'
});
notification.close();

// Close all notifications
this.$notify.closeAll();

// Import for standalone use
import { Notification } from 'element-ui';
Notification.success('Success notification');

/**
 * Global MessageBox service accessible via this.$msgbox, this.$alert, this.$confirm, this.$prompt
 */
interface MessageBoxService {
  (options: MessageBoxOptions): Promise<MessageBoxData>;
  alert(message: string, title?: string, options?: MessageBoxOptions): Promise<void>;
  confirm(message: string, title?: string, options?: MessageBoxOptions): Promise<void>;
  prompt(message: string, title?: string, options?: MessageBoxOptions): Promise<MessageBoxData>;
  close(): void;
}

interface MessageBoxOptions {
  title?: string;
  message?: string;
  type?: 'success' | 'info' | 'warning' | 'error';
  iconClass?: string;
  customClass?: string;
  callback?: Function;
  showClose?: boolean;
  beforeClose?: Function;
  distinguishCancelAndClose?: boolean;
  lockScroll?: boolean;
  showCancelButton?: boolean;
  showConfirmButton?: boolean;
  cancelButtonText?: string;
  confirmButtonText?: string;
  cancelButtonClass?: string;
  confirmButtonClass?: string;
  closeOnClickModal?: boolean;
  closeOnPressEscape?: boolean;
  closeOnHashChange?: boolean;
  showInput?: boolean;
  inputPlaceholder?: string;
  inputType?: string;
  inputValue?: string;
  inputPattern?: RegExp;
  inputValidator?: Function;
  inputErrorMessage?: string;
  center?: boolean;
  roundButton?: boolean;
}

interface MessageBoxData {
  value?: string;
  action: 'confirm' | 'cancel' | 'close';
}

// Component form of MessageBox
const MessageBox = Vue.component;

// Alert dialog
this.$alert('This is a message', 'Title', {
  confirmButtonText: 'OK',
  callback: action => {
    this.$message({
      type: 'info',
      message: `action: ${ action }`
    });
  }
});

// Simplified alert
this.$alert('This is a message')
  .then(() => {
    this.$message('You clicked OK');
  });

// Confirm dialog
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  type: 'warning'
}).then(() => {
  this.$message({
    type: 'success',
    message: 'Delete completed'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: 'Delete canceled'
  });
});

// Simplified confirm
this.$confirm('Are you sure?')
  .then(() => {
    // User confirmed
  })
  .catch(() => {
    // User canceled
  });

// Prompt dialog
this.$prompt('Please input your name', 'Tip', {
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  inputPattern: /[\w]/,
  inputErrorMessage: 'Invalid name'
}).then(({ value }) => {
  this.$message({
    type: 'success',
    message: 'Your name is: ' + value
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: 'Input canceled'
  });
});

// Prompt with validation
this.$prompt('Please input email', 'Tip', {
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  inputValidator: (value) => {
    return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value);
  },
  inputErrorMessage: 'Invalid email format'
}).then(({ value }) => {
  this.$message({
    type: 'success',
    message: 'Your email is: ' + value
  });
});

// Custom MessageBox
this.$msgbox({
  title: 'Message',
  message: 'This is a custom message box',
  showCancelButton: true,
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      instance.confirmButtonLoading = true;
      instance.confirmButtonText = 'Loading...';
      setTimeout(() => {
        done();
        setTimeout(() => {
          instance.confirmButtonLoading = false;
        }, 300);
      }, 3000);
    } else {
      done();
    }
  }
}).then(action => {
  this.$message({
    type: 'info',
    message: 'action: ' + action
  });
});

// Import for standalone use
import { MessageBox } from 'element-ui';
MessageBox.confirm('Are you sure?').then(() => {
  // Confirmed
});

/**
 * Global loading service accessible via this.$loading
 */
interface LoadingService {
  (options?: LoadingOptions): LoadingInstance;
  service(options?: LoadingOptions): LoadingInstance;
  directive: Vue.DirectiveOptions;
}

interface LoadingOptions {
  target?: HTMLElement | string;
  body?: boolean;
  fullscreen?: boolean;
  lock?: boolean;
  text?: string;
  spinner?: string;
  background?: string;
  customClass?: string;
}

interface LoadingInstance {
  close(): void;
  setText(text: string): void;
  removeElLoadingChild(): void;
  handleAfterLeave(): void;
  vm: Vue;
  $el: HTMLElement;
}

// Loading directive options
interface LoadingDirectiveOptions {
  'element-loading-text'?: string;
  'element-loading-spinner'?: string;
  'element-loading-background'?: string;
  'element-loading-custom-class'?: string;
}

// Component form of Loading
const Loading = Vue.component;

// Service usage - fullscreen loading
const loading = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

setTimeout(() => {
  loading.close();
}, 2000);

// Loading on specific element
const loading = this.$loading({
  target: '.loading-container',
  text: 'Loading...'
});

// Loading with custom spinner
const loading = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

// Body loading (covers entire body, not fullscreen)
const loading = this.$loading({
  body: true,
  text: 'Loading...'
});

// Directive usage - basic
<div
  v-loading="loading"
  class="loading-area">
  Content here
</div>

// Directive with options
<div
  v-loading="loading"
  element-loading-text="Loading..."
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
  class="loading-area">
  Content here
</div>

// Table with loading
<el-table
  v-loading="loading"
  element-loading-text="Loading users..."
  element-loading-spinner="el-icon-loading"
  :data="tableData">
  <el-table-column property="name" label="Name"></el-table-column>
  <el-table-column property="email" label="Email"></el-table-column>
</el-table>

// Fullscreen directive loading
<div
  v-loading.fullscreen.lock="fullscreenLoading"
  element-loading-text="Loading..."
  element-loading-background="rgba(0, 0, 0, 0.8)">
  App content
</div>

// Body directive loading
<div
  v-loading.body="bodyLoading"
  element-loading-text="Loading...">
  Body content
</div>

// Import for standalone use
import { Loading } from 'element-ui';
const loadingService = Loading.service({
  text: 'Loading...'
});
loadingService.close();

// Direct call to service
Loading.service().close();

/**
 * Infinite scroll directive for auto-loading content
 */
interface InfiniteScrollDirective extends Vue.DirectiveOptions {
  name: 'infinite-scroll';
}

// Directive options (as element attributes)
interface InfiniteScrollOptions {
  'infinite-scroll-disabled'?: boolean;
  'infinite-scroll-delay'?: number;
  'infinite-scroll-distance'?: number;
  'infinite-scroll-immediate'?: boolean;
  'infinite-scroll-listen-for-event'?: string;
}

// Basic infinite scroll
<ul
  v-infinite-scroll="loadMore"
  class="infinite-list"
  style="overflow:auto">
  <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>

// With options
<ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="disabled"
  infinite-scroll-delay="200"
  infinite-scroll-distance="10"
  class="infinite-list">
  <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>

// Methods
methods: {
  loadMore() {
    this.count += 2;
  }
}

// Disable infinite scroll conditionally
<ul
  v-infinite-scroll="loadMore"
  :infinite-scroll-disabled="loading || noMore"
  class="infinite-list">
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  <li v-if="loading">Loading...</li>
  <li v-if="noMore">No more data</li>
</ul>

// Listen for custom event to re-enable
<div
  v-infinite-scroll="loadMore"
  infinite-scroll-listen-for-event="updateList">
  <p v-for="item in list">{{ item }}</p>
</div>

// Emit custom event to re-enable infinite scroll
this.$emit('updateList');

// Import directive for manual registration
import { InfiniteScroll } from 'element-ui';
Vue.use(InfiniteScroll);

// Or register individually
Vue.directive('InfiniteScroll', InfiniteScroll);

/**
 * Global Element UI configuration available after installation
 */
interface ElementUIGlobalConfig {
  size?: 'large' | 'medium' | 'small' | 'mini';
  zIndex?: number;
  locale?: any;
  i18n?: (path: string, options?: any) => string;
}

// Available on Vue prototype after installation
interface VuePrototypeElementUI {
  $ELEMENT: ElementUIGlobalConfig;
  $loading: LoadingService;
  $msgbox: MessageBoxService;
  $alert: (message: string, title?: string, options?: any) => Promise<void>;
  $confirm: (message: string, title?: string, options?: any) => Promise<void>;
  $prompt: (message: string, title?: string, options?: any) => Promise<any>;
  $notify: NotificationService;
  $message: MessageService;
}

// Global installation with configuration
import ElementUI from 'element-ui';
Vue.use(ElementUI, {
  size: 'medium',
  zIndex: 3000
});

// Access global configuration
console.log(this.$ELEMENT.size); // 'medium'
console.log(this.$ELEMENT.zIndex); // 3000

// Change global configuration at runtime
this.$ELEMENT.size = 'small';

// Install services individually
import { Loading, Message, Notification, MessageBox } from 'element-ui';
Vue.prototype.$loading = Loading.service;
Vue.prototype.$message = Message;
Vue.prototype.$notify = Notification;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;