DOCSEARCHbyAlgolia
Submit Docs

DevUI Vue Component Library

website·Indexed 29 days ago

https://vue-devui.github.io/

A community-driven open-source Vue component library featuring a comprehensive set of UI elements including DataGrid, Table, CodeReview, GitGraph, and Echarts integration. The documentation provides detailed API references, usage demos, and development specifications for contributing to the project.

Tokens
82.8K
Snippets
452
Records
510
Agent score
72%

What's inside DevUI Vue

  2. Use the CheckBox component for single toggles or multi-selection

    The d-checkbox component is used for selecting multiple options or toggling between two states. It supports custom colors, disabled states, and a 'half-checked' (indeterminate) state.
    <template>
  <!-- Basic Checkbox -->
  <d-checkbox label="Checked" v-model="checked" />

  <!-- Disabled Checkbox -->
  <d-checkbox label="Disabled" v-model="checked" :disabled="true" />

  <!-- Custom Color -->
  <d-checkbox label="Custom color" v-model="customCheck" color="RGB(255, 193, 7)" />

  <!-- Half-checked state -->
  <d-checkbox 
    label="Half-checked" 
    :half-checked="halfCheck" 
    v-model="allCheck" 
    @change="onHalfCheckboxChange" 
  />
</template>

<script setup>
import { ref } from 'vue';
const checked = ref(true);
const customCheck = ref(true);
const halfCheck = ref(true);
const allCheck = ref(false);

const onHalfCheckboxChange = (value) => {
  halfCheck.value = !allCheck.value;
};
</script>

  3. Use the Status component to indicate task results

    The d-status component is used to communicate the outcome of an interaction or the execution result of a task. It supports various visual states to represent different statuses such as success, error, or processing.

  4. Integrate ECharts using the DChart component

    The d-chart component is a DevUI-themed wrapper for Apache ECharts. It allows developers to render charts by passing a standard ECharts option object. To ensure the chart renders correctly, the component should be given a specific width and height via CSS styles.

  5. Implement a basic Select dropdown

    The d-select component allows users to select a single option from a list. You can control the size using the size prop (sm, md (default), or lg) and change the visual style to a bottom-border only using overview="underlined".
    <template>
  <!-- Small size -->
  <d-select v-model="value1" :options="options" size="sm"></d-select>
  <!-- Default (Middle) size -->
  <d-select v-model="value2" :options="options"></d-select>
  <!-- Large size -->
  <d-select v-model="value3" :options="options" size="lg"></d-select>
  <!-- Underlined style -->
  <d-select v-model="value4" :options="options" size="lg" overview="underlined"></d-select>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const value1 = ref('');
    const options = reactive(['Option 1', 'Option 2', 'Option 3']);
    return { value1, options };
  },
});
</script>

  6. Display global feedback messages with Message

    The Message component is used to provide global feedback to users after an active operation. It is distinct from Notification, which is typically used for passive system-level alerts. Messages appear for a few seconds and then automatically disappear.

  7. Use the Avatar component to display user profiles

    The d-avatar component displays a user's profile image. If no image is provided, it can generate a text-based avatar based on the user's name or a custom string. The component supports custom dimensions, shape (round or square), and handles image loading errors.

  8. Implement a basic Card component

    The d-card component serves as a general container for overview displays. It provides several named slots to structure the card's content: avatar for profile images, title for the main heading, subtitle for supplementary info, content for the body text, and actions for operational buttons or links.
    <template>
  <d-card class="card-demo-basic">
    <template #avatar>
      <d-avatar name="DevUI"></d-avatar>
    </template>
    <template #title> DEVUI Course </template>
    <template #subtitle class="card-demo-icon">
      <d-icon name="company-member"></d-icon><span>DevUI</span>
    </template>
    <template #content>
      DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products.
    </template>
    <template #actions>
      <div class="card-block"><d-icon name="like"></d-icon><span>12</span></div>
      <div class="card-block"><d-icon name="star-o"></d-icon><span>8</span></div>
      <div class="card-block"><d-icon name="message"></d-icon><span>8</span></div>
    </template>
  </d-card>
</template>

  9. Handle v-d-sortable events

    The v-d-sortable directive supports several events to track the drag-and-drop lifecycle. The drop event provides detailed information about the movement of the item.
    // Available events:
// dragStart: Triggered when dragging begins
// dragEnd: Triggered when dragging ends
// dragEnter: Triggered when a dragged element enters a valid target
// dragOver: Triggered when a dragged element is over a target
// dragLeave: Triggered when a dragged element leaves a target
// drop: Triggered when the element is released

// DropEvent Type Definition:
type DropEvent = {
  event: DragEvent;   // The native browser drag event
  list: any;          // The current bound list (same object as passed in config)
  fromIndex: number;  // Index where the drag started
  targetIndex: number; // Index where the item was dropped
}

  10. Use the Alert component for warning messages

    The d-alert component is used to display warning or informational messages that require user attention. It supports five visual styles defined by the type prop: success, danger, warning, info, and simple.
    <template>
  <d-alert type="success">Success Message</d-alert>
  <d-alert type="danger">Danger Message</d-alert>
  <d-alert type="warning">Warning Message</d-alert>
  <d-alert type="info">Info Message</d-alert>
  <d-alert type="simple">Simple Message</d-alert>
</template>

  11. Implement a basic 24-column grid layout

    DevUI uses a 24-column grid system. To create a layout, use the d-row component as a container and d-col components as children. The :span prop on d-col defines how many of the 24 columns the element should occupy.
    <template>
  <d-row>
    <d-col :span="12">Half width (12/24)</d-col>
    <d-col :span="12">Half width (12/24)</d-col>
  </d-row>
  <d-row>
    <d-col :span="8">One third (8/24)</d-col>
    <d-col :span="8">One third (8/24)</d-col>
    <d-col :span="8">One third (8/24)</d-col>
  </d-row>
</template>

  12. Integrate Vue DevUI into a Nuxt 3 project

    To use the Vue DevUI component library in a Nuxt 3 project, you must create a Nuxt plugin to register the library and import its global styles. This allows Vue DevUI components (prefixed with D) to be used throughout the application.
    // plugins/vue-devui.ts
import VueDevUI from 'vue-devui';
import 'vue-devui/style.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDevUI);
});