Vue DevUI

Vue DevUI is a comprehensive component library containing 77 flexible and powerful components. The library is organized into various categories, and components are tracked by their development status and feature completeness.

Component Status Indicators:

• ✅ Completed: Fully functional components.
• 🚧 In Development: Components currently being worked on.
• ⌛ Pending: Components awaiting implementation or claim.

Component Metadata:

• Complexity: Some components are marked with a star (⭐) to indicate higher complexity.
• Version: Components are associated with specific versions.
• Deprecation: Deprecated components are visually flagged.
• Features: Each component includes a set of specific features, which are linked to detailed documentation for each feature.

The Button component provides built-in support for interaction states:

• disabled: A boolean prop to disable the button. Defaults to false.
• loading: A boolean prop to show a loading state within the button. Defaults to false.

You can extend the appearance of the date picker panel using two slots:

• rightArea: Used to add content to the right side of the calendar panel (e.g., quick date selection buttons).
• footer: Used to add content to the bottom of the panel (e.g., 'Clear' or 'Today' buttons).

<template>
  <d-date-picker-pro v-model="datePickerProValue" :showTime="true">
    <template #rightArea>
      <ul>
        <li><d-button @click="setDate(-7)">Last Week</d-button></li>
      </ul>
    </template>
    <template #footer>
      <div class="date-picker-footer">
        <d-button variant="solid" @click="setToday">Today</d-button>
      </div>
    </template>
  </d-date-picker-pro>
</template>

Display Priority

When multiple sources are provided, the component follows this priority order:

1. imgSrc
2. customText
3. name

Character Generation Rules (for name)

If the component generates an avatar from the name string, it follows these rules:

• Starts with Chinese characters: Uses the last two characters.
• Starts with English characters: Uses the first two characters.
• Multiple English names: Uses the first two letters of the first English name.
• Other (non-Chinese/English): Uses the first two characters.

Empty or Missing States

• No data: If name, customText, and imgSrc are all missing, the component indicates the user does not exist.
• Empty data: If name, customText, or imgSrc are provided but are empty strings, the component displays a default avatar.

You can control or prevent the panel from folding by using the before-toggle property. This property accepts a function that is called before the collapse status changes.

• To prevent folding: If the before-toggle function returns false, the panel will not fold (though it remains unaffected if it was already unfolded).
• To control collapse asynchronously: The function receives a done callback. You can perform asynchronous operations and then call done() to trigger the actual collapse/expand action.

// Example: Asynchronous toggle using done()
let beforeToggle = (e, done) => {
  if (!opened) {
    setTimeout(() => {
      done();
    }, 1000);
    opened = true;
  }
}

// Example: Simple prevention
const beforeToggle = (e) => {
  return panelToggle.value; // returns false to prevent toggle
};

You can implement multi-level header grouping by nesting d-column components inside other d-column components.

<d-column header="Group Header">
  <d-column field="sub-field-1" header="Sub 1"></d-column>
  <d-column field="sub-field-2" header="Sub 2"></d-column>
</d-column>

The CommentPosition interface describes where a comment is placed.

In line-by-line mode, left and right represent line numbers for the left and right columns respectively.

• If the position is an unchanged line, both left and right are the line number.
• If the position is a deleted line, left is the line number and right is -1.
• If the position is an added line, left is -1 and right is the line number.

When allow-checked is enabled, the object includes a details property for multi-line selections:

interface CommentPosition {
  left: number;
  right: number;
  details?: {
    lefts: Array<number>;
    rights: Array<number>;
    codes: Array<string> | {
      leftCode: Array<string>;
      rightCode: Array<string>;
    }
  }
}