UXCool

https://github.com/suning-cloud-team/uxcool
Admin
UXCool is a UI component library developed by Suning Cloud Front-end Team for building user...
Tokens:12,464
Snippets:29
Trust Score:3.6
License:MIT
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Development Server

Source: https://github.com/suning-cloud-team/uxcool/blob/master/packages/v-table/README.md

Commands to install project dependencies using yarn and to start the development server. Ensure Node.js and Yarn are installed on your system.

```bash
yarn
yarn start
```

--------------------------------

### UXCOOl Cascader Component Examples (Vue)

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates various configurations of the UXCOOl Cascader component in Vue.js. Includes basic setup, search, selecting any level, custom field names, and asynchronous data loading. Assumes the 'ux-cascader' component is available.

```vue
<template>
  <div>
    <!-- Basic cascader -->
    <ux-cascader
      v-model="value"
      :options="options"
      placeholder="Please select"
      @change="handleChange"
    />

    <!-- Cascader with search -->
    <ux-cascader
      v-model="searchValue"
      :options="options"
      show-search
      placeholder="Search and select"
      @search="handleSearch"
    />

    <!-- Select any level -->
    <ux-cascader
      v-model="anyLevelValue"
      :options="options"
      change-on-select
      placeholder="Select any level"
    />

    <!-- Custom field names -->
    <ux-cascader
      v-model="customValue"
      :options="customOptions"
      :field-names="{
        label: 'name',
        value: 'code',
        children: 'items'
      }"
      placeholder="Custom fields"
    />

    <!-- Async loading -->
    <ux-cascader
      v-model="asyncValue"
      :options="asyncOptions"
      :load-data="loadCascaderData"
      placeholder="Load on demand"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      searchValue: [],
      anyLevelValue: [],
      customValue: [],
      asyncValue: [],
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                { value: 'xihu', label: 'West Lake' },
                { value: 'xiasha', label: 'Xiasha' }
              ]
            },
            {
              value: 'ningbo',
              label: 'Ningbo',
              children: [
                { value: 'yuyao', label: 'Yuyao' }
              ]
            }
          ]
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                { value: 'zhonghuamen', label: 'Zhong Hua Men' }
              ]
            }
          ]
        }
      ],
      customOptions: [
        {
          code: 'zhejiang',
          name: 'Zhejiang',
          items: [
            {
              code: 'hangzhou',
              name: 'Hangzhou',
              items: [
                { code: 'xihu', name: 'West Lake' }
              ]
            }
          ]
        }
      ],
      asyncOptions: [
        { value: 'zhejiang', label: 'Zhejiang', isLeaf: false },
        { value: 'jiangsu', label: 'Jiangsu', isLeaf: false }
      ]
    };
  },
  methods: {
    handleChange(value, selectedOptions) {
      console.log('Cascader changed:', value, selectedOptions);
    },
    handleSearch(searchText) {
      console.log('Searching:', searchText);
    },
    loadCascaderData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      return new Promise(resolve => {
        setTimeout(() => {
          targetOption.loading = false;
          targetOption.children = [
            { value: `${targetOption.value}-1`, label: `${targetOption.label} Child 1`, isLeaf: true },
            { value: `${targetOption.value}-2`, label: `${targetOption.label} Child 2`, isLeaf: true }
          ];
          resolve();
        }, 1000);
      });
    }
  }
};
</script>
```

--------------------------------

### Install UXCool Component Library

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Instructions for installing the UXCool component library using npm or yarn package managers. This is the first step to integrating UXCool into your Vue project.

```bash
# Install via npm
npm install @cloud-sn/uxcool --save

# Or via yarn
yarn add @cloud-sn/uxcool
```

--------------------------------

### UXCool Grid System Examples (Vue)

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates the usage of the UXCool grid system for layout creation. It includes basic grid, grids with gutters, responsive grids, flex layouts, and offset configurations. This component relies on Vue.js for rendering.

```vue
<template>
  <div>
    <!-- Basic grid -->
    <ux-row>
      <ux-col :span="12">
        <div style="background: #0092ff; padding: 10px">Col-12</div>
      </ux-col>
      <ux-col :span="12">
        <div style="background: #00a2ae; padding: 10px">Col-12</div>
      </ux-col>
    </ux-row>

    <!-- Grid with gutter -->
    <ux-row :gutter="16">
      <ux-col :span="6">
        <div style="background: #0092ff; padding: 10px">Col-6</div>
      </ux-col>
      <ux-col :span="6">
        <div style="background: #00a2ae; padding: 10px">Col-6</div>
      </ux-col>
      <ux-col :span="6">
        <div style="background: #0092ff; padding: 10px">Col-6</div>
      </ux-col>
      <ux-col :span="6">
        <div style="background: #00a2ae; padding: 10px">Col-6</div>
      </ux-col>
    </ux-row>

    <!-- Responsive grid -->
    <ux-row :gutter="16">
      <ux-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4"
      >
        <div style="background: #0092ff; padding: 10px">Responsive</div>
      </ux-col>
      <ux-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4"
      >
        <div style="background: #00a2ae; padding: 10px">Responsive</div>
      </ux-col>
    </ux-row>

    <!-- Flex layout -->
    <ux-row type="flex" justify="space-around" align="middle">
      <ux-col :span="4">
        <div style="background: #0092ff; padding: 10px">Col-4</div>
      </ux-col>
      <ux-col :span="4">
        <div style="background: #00a2ae; padding: 10px">Col-4</div>
      </ux-col>
      <ux-col :span="4">
        <div style="background: #0092ff; padding: 10px">Col-4</div>
      </ux-col>
    </ux-row>

    <!-- Offset -->
    <ux-row>
      <ux-col :span="8">
        <div style="background: #0092ff; padding: 10px">Col-8</div>
      </ux-col>
      <ux-col :span="8" :offset="8">
        <div style="background: #00a2ae; padding: 10px">Col-8 Offset-8</div>
      </ux-col>
    </ux-row>
  </div>
</template>

<style scoped>
.ux-row {
  margin-bottom: 16px;
}
</style>
```

--------------------------------

### Full Import and Setup of UXCool in Vue

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates how to perform a full import of the UXCool library and its CSS in a Vue application. This method makes all components available globally after calling Vue.use().

```javascript
// Full import
import Vue from 'vue';
import UxCool from '@cloud-sn/uxcool';
import '@cloud-sn/uxcool/dist/uxcool.css';

Vue.use(UxCool);

// Create Vue application
new Vue({
  el: '#app',
  template: '<ux-button type="primary">Hello UXCool</ux-button>'
});
```

--------------------------------

### UXCool Button Component Examples

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Illustrates various ways to use the UXCool Button component, including different types, icons, loading states, sizes, as links, button groups, and disabled states.

```vue
<template>
  <div>
    <!-- Basic buttons with different types -->
    <ux-button type="primary">Primary</ux-button>
    <ux-button type="ghost">Ghost</ux-button>
    <ux-button type="dashed">Dashed</ux-button>
    <ux-button type="danger">Danger</ux-button>

    <!-- Buttons with icons -->
    <ux-button type="primary" icon="search">Search</ux-button>
    <ux-button icon="download" shape="circle" />

    <!-- Loading state with delay -->
    <ux-button
      type="primary"
      :loading="isLoading"
      @click="handleSubmit"
    >
      Submit
    </ux-button>

    <!-- Loading with delay configuration -->
    <ux-button
      type="primary"
      :loading="{delay: 1500}"
    >
      Delayed Loading
    </ux-button>

    <!-- Button sizes -->
    <ux-button size="small">Small</ux-button>
    <ux-button size="default">Default</ux-button>
    <ux-button size="large">Large</ux-button>

    <!-- Button as link -->
    <ux-button href="https://example.com" target="_blank">
      Link Button
    </ux-button>

    <!-- Button group -->
    <ux-button-group>
      <ux-button>Cancel</ux-button>
      <ux-button type="primary">OK</ux-button>
    </ux-button-group>

    <!-- Disabled state -->
    <ux-button disabled>Disabled</ux-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    async handleSubmit() {
      this.isLoading = true;
      try {
        await this.submitForm();
      } finally {
        this.isLoading = false;
      }
    },
    submitForm() {
      return new Promise(resolve => setTimeout(resolve, 2000));
    }
  }
};
</script>
```

--------------------------------

### Vue Upload Component Examples

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates various configurations of the UXCool Upload component. Includes basic file upload, drag-and-drop functionality, image uploads with previews, and custom request handling. It utilizes Vue.js template syntax and component lifecycle hooks.

```vue
<template>
  <div>
    <!-- Basic upload -->
    <ux-upload
      action="/api/upload"
      :file-list="fileList"
      @change="handleChange"
    >
      <ux-button icon="upload">Click to Upload</ux-button>
    </ux-upload>

    <!-- Drag and drop -->
    <ux-upload-dragger
      action="/api/upload"
      :multiple="true"
      @change="handleDraggerChange"
    >
      <p class="upload-drag-icon">
        <ux-icon type="inbox" />
      </p>
      <p class="upload-text">Click or drag file to this area to upload</p>
      <p class="upload-hint">
        Support for a single or bulk upload
      </p>
    </ux-upload-dragger>

    <!-- Image upload with preview -->
    <ux-upload
      action="/api/upload"
      list-type="picture-card"
      :file-list="imageList"
      :before-upload="beforeUpload"
      @preview="handlePreview"
      @change="handleImageChange"
    >
      <div v-if="imageList.length < 8">
        <ux-icon type="plus" />
        <div class="upload-text">Upload</div>
      </div>
    </ux-upload>

    <ux-modal v-model="previewVisible" :footer="null">
      <img :src="previewImage" style="width: 100%" />
    </ux-modal>

    <!-- Custom request -->
    <ux-upload
      :custom-request="customUpload"
      :file-list="customFileList"
      @change="handleCustomChange"
    >
      <ux-button icon="upload">Custom Upload</ux-button>
    </ux-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      imageList: [],
      customFileList: [],
      previewVisible: false,
      previewImage: ''
    };
  },
  methods: {
    handleChange({ file, fileList }) {
      console.log('File changed:', file);
      this.fileList = fileList;

      if (file.status === 'done') {
        this.$message.success(`${file.name} uploaded successfully`);
      } else if (file.status === 'error') {
        this.$message.error(`${file.name} upload failed`);
      }
    },
    handleDraggerChange({ file, fileList }) {
      console.log('Dragger changed:', file, fileList);
    },
    handleImageChange({ file, fileList }) {
      this.imageList = fileList;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG/PNG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    customUpload({ file, onSuccess, onError, onProgress }) {
      const formData = new FormData();
      formData.append('file', file);

      // Custom upload logic
      const xhr = new XMLHttpRequest();

      xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
          const percent = (e.loaded / e.total) * 100;
          onProgress({ percent });
        }
      });

      xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
          onSuccess(JSON.parse(xhr.responseText), xhr);
        } else {
          onError(new Error('Upload failed'));
        }
      });

      xhr.addEventListener('error', () => {
        onError(new Error('Upload failed'));
      });

      xhr.open('POST', '/api/upload');
      xhr.send(formData);
    },
    handleCustomChange({ file, fileList }) {
      this.customFileList = fileList;
    }
  }
};
</script>

```

--------------------------------

### Import Vue and v-table Component

Source: https://github.com/suning-cloud-team/uxcool/blob/master/packages/v-table/README.md

Example of importing the Vue library and the v-table component from the '@cloud-sn/v-table' package. This is the initial step for using the component in a Vue application.

```javascript
import Vue from 'vue';
import Pagination from '@cloud-sn/v-table';
```

--------------------------------

### UXCOOOL Input Component Examples (Vue)

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

This snippet showcases various configurations of the UXCOOOL Input Component. It includes basic usage with v-model, inputs with clear buttons and event handlers, inputs with prepended and appended addons, character limit functionality, password input type, search input variations, different size options, and a textarea with auto-resize. It also demonstrates how to group multiple inputs.

```vue
<template>
  <div>
    <!-- Basic input with v-model -->
    <ux-input
      v-model="username"
      placeholder="Enter username"
    />

    <!-- Input with clear button -->
    <ux-input
      v-model="email"
      placeholder="Enter email"
      allow-clear
      @change="handleEmailChange"
    />

    <!-- Input with addons -->
    <ux-input
      v-model="website"
      addon-before="https://"
      addon-after=".com"
    />

    <!-- Input with character limit -->
    <ux-input
      v-model="description"
      placeholder="Max 100 characters"
      :maxlength="100"
      show-word-limit
    />

    <!-- Password input -->
    <ux-input
      v-model="password"
      type="password"
      placeholder="Enter password"
    />

    <!-- Search input -->
    <ux-search-input
      v-model="searchQuery"
      placeholder="Search..."
      @search="handleSearch"
      @pressenter="handleSearch"
    />

    <!-- Input sizes -->
    <ux-input v-model="value1" size="small" placeholder="Small" />
    <ux-input v-model="value2" size="default" placeholder="Default" />
    <ux-input v-model="value3" size="large" placeholder="Large" />

    <!-- Textarea with auto-resize -->
    <ux-input-textarea
      v-model="comment"
      placeholder="Enter comment"
      :rows="4"
      :maxlength="500"
      show-word-limit
    />

    <!-- Input group -->
    <ux-input-group>
      <ux-input v-model="firstName" placeholder="First name" style="width: 50%" />
      <ux-input v-model="lastName" placeholder="Last name" style="width: 50%" />
    </ux-input-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      website: '',
      description: '',
      password: '',
      searchQuery: '',
      comment: '',
      firstName: '',
      lastName: ''
    };
  },
  methods: {
    handleEmailChange(e) {
      console.log('Email changed:', e.target.value);
    },
    handleSearch(value) {
      console.log('Searching for:', value || this.searchQuery);
      // Perform search operation
    }
  }
};
</script>
```

--------------------------------

### UXDatePicker Component Examples (Vue)

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates various use cases of the UXDatePicker component in Vue.js, including basic date selection, date with time, date range selection, and pickers for month, week, and year. It also shows how to implement custom logic for disabling dates and times.

```vue
<template>
  <div>
    <!-- Basic date picker -->
    <ux-date-picker
      v-model="date"
      placeholder="Select date"
      format="YYYY-MM-DD"
      @change="handleDateChange"
    />

    <!-- Date picker with time -->
    <ux-date-picker
      v-model="datetime"
      :show-time="{hideDisabledOptions: true}"
      format="YYYY/MM/DD HH:mm:ss"
      placeholder="Select date and time"
      @ok="handleDateTimeOk"
    />

    <!-- Date range picker -->
    <ux-range-date-picker
      v-model="dateRange"
      :placeholder="['Start Date', 'End Date']"
      format="YYYY-MM-DD"
      @change="handleRangeChange"
    />

    <!-- Month picker -->
    <ux-month-picker
      v-model="month"
      placeholder="Select month"
      format="YYYY-MM"
    />

    <!-- Week picker -->
    <ux-week-picker
      v-model="week"
      placeholder="Select week"
      format="YYYY-wo"
    />

    <!-- Year picker -->
    <ux-year-picker
      v-model="year"
      placeholder="Select year"
      format="YYYY"
    />

    <!-- Date picker with disabled dates -->
    <ux-date-picker
      v-model="restrictedDate"
      :disabled-date="disabledDate"
      placeholder="Future dates only"
    />

    <!-- Date picker with disabled time -->
    <ux-date-picker
      v-model="restrictedDateTime"
      :show-time="true"
      :disabled-time="disabledTime"
      placeholder="Restricted time"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: null,
      datetime: null,
      dateRange: [],
      month: null,
      week: null,
      year: null,
      restrictedDate: null,
      restrictedDateTime: null
    };
  },
  methods: {
    handleDateChange(date, dateString) {
      console.log('Date changed:', date, dateString);
    },
    handleDateTimeOk(date) {
      console.log('DateTime selected:', date);
    },
    handleRangeChange(dates, dateStrings) {
      console.log('Range changed:', dates, dateStrings);
    },
    disabledDate(current) {
      // Disable dates before today
      return current && current < new Date().setHours(0, 0, 0, 0);
    },
    disabledTime(date) {
      // Disable hours before 9am and after 6pm
      return {
        disabledHours: () => {
          const hours = [];
          for (let i = 0; i < 9; i++) hours.push(i);
          for (let i = 18; i < 24; i++) hours.push(i);
          return hours;
        },
        disabledMinutes: () => [],
        disabledSeconds: () => []
      };
    }
  }
};
</script>
```

--------------------------------

### UXCool Modal Component Implementation (Vue)

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates how to use the UXCool Modal component in Vue.js. It covers basic modal display, confirmation modals, modals with custom footers, and centered modals. It requires the UXCool UI library to be installed and registered.

```vue
<template>
  <div>
    <!-- Basic modal -->
    <ux-button type="primary" @click="showModal">
      Open Modal
    </ux-button>

    <ux-modal
      v-model="visible"
      title="Basic Modal"
      :width="600"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>Modal content goes here...</p>
      <p>You can add any Vue components or HTML.</p>
    </ux-modal>

    <!-- Confirm modal -->
    <ux-button @click="showConfirm">
      Confirm
    </ux-button>

    <!-- Custom footer modal -->
    <ux-modal
      v-model="customVisible"
      title="Custom Footer"
      :footer="null"
    >
      <p>Custom footer example</p>
      <div style="text-align: right; margin-top: 20px">
        <ux-button @click="customVisible = false">
          Cancel
        </ux-button>
        <ux-button
          type="primary"
          style="margin-left: 8px"
          @click="handleCustomOk"
        >
          OK
        </ux-button>
      </div>
    </ux-modal>

    <!-- Centered modal -->
    <ux-modal
      v-model="centeredVisible"
      title="Centered Modal"
      centered
    >
      <p>This modal is centered on the screen.</p>
    </ux-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      customVisible: false,
      centeredVisible: false
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      console.log('OK clicked');
      this.visible = false;
    },
    handleCancel() {
      console.log('Cancel clicked');
      this.visible = false;
    },
    showConfirm() {
      this.$confirm({
        title: 'Are you sure?',
        content: 'This action cannot be undone.',
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk: () => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              console.log('Confirmed');
              resolve();
            }, 1000);
          });
        },
        onCancel: () => {
          console.log('Cancelled');
        }
      });
    },
    showSuccess() {
      this.$success({
        title: 'Success!',
        content: 'Operation completed successfully.'
      });
    },
    showError() {
      this.$error({
        title: 'Error!',
        content: 'Something went wrong.'
      });
    },
    showWarning() {
      this.$warning({
        title: 'Warning!',
        content: 'Please be careful.'
      });
    },
    showInfo() {
      this.$info({
        title: 'Information',
        content: 'Here is some information.'
      });
    },
    handleCustomOk() {
      this.customVisible = false;
    }
  }
};
</script>
```

--------------------------------

### UX Select Component Examples in Vue.js

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates the usage of the UX Select component for various scenarios including basic selection, search, multiple selections, tags, option groups, data source binding, and virtual scrolling. It requires Vue.js for rendering and includes methods for filtering and handling selection changes.

```vue
<template>
  <div>
    <!-- Basic select -->
    <ux-select
      v-model="country"
      placeholder="Select country"
      style="width: 200px"
    >
      <ux-option value="us" label="United States" />
      <ux-option value="uk" label="United Kingdom" />
      <ux-option value="cn" label="China" />
      <ux-option value="jp" label="Japan" />
    </ux-select>

    <!-- Select with search -->
    <ux-select
      v-model="city"
      show-search
      allow-clear
      placeholder="Search city"
      style="width: 200px"
      :filter-option="filterCity"
    >
      <ux-option value="beijing" label="Beijing" />
      <ux-option value="shanghai" label="Shanghai" />
      <ux-option value="guangzhou" label="Guangzhou" />
      <ux-option value="shenzhen" label="Shenzhen" />
    </ux-select>

    <!-- Multiple select -->
    <ux-select
      v-model="selectedSkills"
      mode="multiple"
      placeholder="Select skills"
      style="width: 300px"
      :max-tag-count="3"
      @change="handleSkillsChange"
    >
      <ux-option value="js" label="JavaScript" />
      <ux-option value="vue" label="Vue.js" />
      <ux-option value="react" label="React" />
      <ux-option value="angular" label="Angular" />
      <ux-option value="node" label="Node.js" />
    </ux-select>

    <!-- Tags mode (allows creating new options) -->
    <ux-select
      v-model="tags"
      mode="tags"
      placeholder="Add tags"
      style="width: 300px"
      :token-separators="[',']"
    >
      <ux-option value="tag1" label="Tag 1" />
      <ux-option value="tag2" label="Tag 2" />
    </ux-select>

    <!-- Option groups -->
    <ux-select
      v-model="role"
      placeholder="Select role"
      style="width: 200px"
    >
      <ux-option-group label="Admin">
        <ux-option value="superadmin" label="Super Admin" />
        <ux-option value="admin" label="Admin" />
      </ux-option-group>
      <ux-option-group label="User">
        <ux-option value="editor" label="Editor" />
        <ux-option value="viewer" label="Viewer" />
      </ux-option-group>
    </ux-select>

    <!-- Data source mode -->
    <ux-select
      v-model="product"
      :data-source="productOptions"
      placeholder="Select product"
      style="width: 200px"
    />

    <!-- With virtual scrolling for large datasets -->
    <ux-select
      v-model="largeValue"
      :lazy="true"
      placeholder="Large list"
      style="width: 200px"
    >
      <ux-option
        v-for="i in 10000"
        :key="i"
        :value="`option${i}`"
        :label="`Option ${i}`"
      />
    </ux-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      country: '',
      city: '',
      selectedSkills: [],
      tags: [],
      role: '',
      product: '',
      largeValue: '',
      productOptions: [
        { value: 'prod1', label: 'Product 1' },
        { value: 'prod2', label: 'Product 2' },
        { value: 'prod3', label: 'Product 3' }
      ]
    };
  },
  methods: {
    filterCity(input, option) {
      return option.componentOptions.propsData.label
        .toLowerCase()
        .includes(input.toLowerCase());
    },
    handleSkillsChange(values) {
      console.log('Selected skills:', values);
    }
  }
};
</script>

```

--------------------------------

### UXCool Message and Notification APIs (JavaScript)

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Provides examples for using the Message and Notification APIs in UXCool for user feedback. The Message API is for simple global feedback, while the Notification API allows for more complex, dismissible alerts. These APIs are typically accessed via `this.$message` and `this.$notification` within a Vue component context.

```javascript
// Message API - Global feedback messages
this.$message.success('Success message');
this.$message.error('Error message');
this.$message.warning('Warning message');
this.$message.info('Info message');
this.$message.loading('Loading...', 0); // 0 = no auto-close

// With duration
this.$message.success('This will close in 3 seconds', 3);

// With callback
this.$message.success('Operation completed', 2, () => {
  console.log('Message closed');
});

// Configuration
this.$message.config({
  duration: 2, // seconds
  top: '100px',
  maxCount: 3
});

// Destroy all messages
this.$message.destroy();

// Notification API - More complex notifications with title and description
this.$notification.success({
  title: 'Success',
  message: 'Your operation completed successfully',
  duration: 4.5,
  placement: 'topRight' // topLeft, topRight, bottomLeft, bottomRight
});

this.$notification.error({
  title: 'Error',
  message: 'Something went wrong',
  description: 'Please try again later',
  duration: 0, // Won't auto-close
  onClose: () => {
    console.log('Notification closed');
  }
});

this.$notification.warning({
  title: 'Warning',
  message: 'Please be careful',
  placement: 'bottomRight'
});

this.$notification.info({
  title: 'Information',
  message: 'Here is some useful information'
});

// Open with custom key for updating
this.$notification.open({
  key: 'updatable',
  title: 'Processing',
  message: 'Your request is being processed...'
});

// Update existing notification
setTimeout(() => {
  this.$notification.success({
    key: 'updatable',
    title: 'Complete',
    message: 'Your request has been processed'
  });
}, 2000);

// Close specific notification
this.$notification.close('updatable');

// Destroy all notifications
this.$notification.destroy();
```

--------------------------------

### On-Demand Component Import with UXCool

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Shows how to import specific UXCool components and their styles on demand. This approach is beneficial for reducing bundle size by only including necessary components.

```javascript
// Import specific components with styles
import '@cloud-sn/uxcool/es/button/style/css';
import '@cloud-sn/uxcool/es/input/style/css';
import '@cloud-sn/uxcool/es/select/style/css';
import { UxButton } from '@cloud-sn/uxcool/es/button';
import { UxInput } from '@cloud-sn/uxcool/es/input';
import { UxSelect, UxOption, UxOptionGroup } from '@cloud-sn/uxcool/es/select';

export default {
  components: {
    UxButton,
    UxInput,
    UxSelect,
    UxOption,
    UxOptionGroup
  },
  data() {
    return {
      inputValue: '',
      selectValue: ''
    };
  }
};
```

--------------------------------

### UXCool Basic Tree Component Implementation

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Demonstrates the basic usage of the ux-tree component. It displays hierarchical data and handles node selection events. Requires a data-source prop for tree data and an optional default-expanded-keys prop.

```vue
<template>
  <div>
    <!-- Basic tree -->
    <ux-tree
      :data-source="treeData"
      :default-expanded-keys="['0-0']"
      @select="handleSelect"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Parent 0',
          key: '0-0',
          children: [
            {
              title: 'Child 0-0',
              key: '0-0-0',
              children: [
                { title: 'Leaf 0-0-0', key: '0-0-0-0' },
                { title: 'Leaf 0-0-1', key: '0-0-0-1' }
              ]
            },
            {
              title: 'Child 0-1',
              key: '0-0-1',
              children: [
                { title: 'Leaf 0-1-0', key: '0-0-1-0' }
              ]
            }
          ]
        },
        {
          title: 'Parent 1',
          key: '0-1',
          children: [
            { title: 'Child 1-0', key: '0-1-0' },
            { title: 'Child 1-1', key: '0-1-1' }
          ]
        }
      ]
    };
  },
  methods: {
    handleSelect(selectedKeys, { node }) {
      console.log('Selected:', selectedKeys, node);
    }
  }
};
</script>
```

--------------------------------

### Automatic On-Demand Import with Babel Plugin for UXCool

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Explains how to configure the Babel import plugin to automatically handle on-demand imports for UXCool components and their styles. This simplifies the import process in your code.

```javascript
// .babelrc configuration
{
  "plugins": [
    ["import", {
      "libraryName": "@cloud-sn/uxcool",
      "style": "css"
    }]
  ]
}

// Then import directly without manual style imports
import { UxButton, UxInput, UxSelect } from '@cloud-sn/uxcool';
// Styles are automatically imported
```

--------------------------------

### UXCool Checkable Tree Component Implementation

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Implements a checkable version of the ux-tree component, allowing users to select nodes with checkboxes. It manages checked and expanded keys and provides callbacks for check and expand events. Requires `checkable` prop and `checked-keys`, `expanded-keys` for state management.

```vue
<template>
  <div>
    <!-- Checkable tree -->
    <ux-tree
      :data-source="treeData"
      checkable
      :checked-keys="checkedKeys"
      :expanded-keys="expandedKeys"
      @check="handleCheck"
      @expand="handleExpand"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedKeys: ['0-0-0'],
      expandedKeys: ['0-0'],
      treeData: [
        {
          title: 'Parent 0',
          key: '0-0',
          children: [
            {
              title: 'Child 0-0',
              key: '0-0-0',
              children: [
                { title: 'Leaf 0-0-0', key: '0-0-0-0' },
                { title: 'Leaf 0-0-1', key: '0-0-0-1' }
              ]
            },
            {
              title: 'Child 0-1',
              key: '0-0-1',
              children: [
                { title: 'Leaf 0-1-0', key: '0-0-1-0' }
              ]
            }
          ]
        },
        {
          title: 'Parent 1',
          key: '0-1',
          children: [
            { title: 'Child 1-0', key: '0-1-0' },
            { title: 'Child 1-1', key: '0-1-1' }
          ]
        }
      ]
    };
  },
  methods: {
    handleCheck(checkedKeys, { node, checked }) {
      console.log('Checked:', checkedKeys, node, checked);
      this.checkedKeys = checkedKeys;
    },
    handleExpand(expandedKeys) {
      console.log('Expanded:', expandedKeys);
      this.expandedKeys = expandedKeys;
    }
  }
};
</script>
```

--------------------------------

### UXCool Async Loading Tree Component

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Configures the ux-tree component for asynchronous data loading. The `load-data` prop accepts a function that returns a Promise resolving with child nodes, enabling dynamic loading of data as users expand nodes. Requires `load-data` prop.

```vue
<template>
  <div>
    <!-- Tree with async loading -->
    <ux-tree
      :data-source="asyncTreeData"
      :load-data="loadTreeData"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncTreeData: [
        { title: 'Node 1', key: '0-0', isLeaf: false },
        { title: 'Node 2', key: '0-1', isLeaf: false }
      ]
    };
  },
  methods: {
    loadTreeData(node) {
      return new Promise(resolve => {
        // Simulate network request
        setTimeout(() => {
          const children = [
            { title: `Child ${node.key}-0`, key: `${node.key}-0`, isLeaf: true },
            { title: `Child ${node.key}-1`, key: `${node.key}-1`, isLeaf: true }
          ];
          resolve(children);
        }, 1000);
      });
    }
  }
};
</script>
```

--------------------------------

### Configure NPM Registry and Add v-pagination Dependency

Source: https://github.com/suning-cloud-team/uxcool/blob/master/packages/v-table/README.md

Commands to configure the npm registry for the cloud-sn scope and to add the v-pagination component as a project dependency. This is necessary for the v-table component's pagination functionality.

```bash
npm config set @cloud-sn:registry http://snpm.cnsuning.com
yarn add @cloud-sn/v-pagination
```

--------------------------------

### UXCool Tree with Custom Node Rendering

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Shows how to customize the rendering of tree nodes using scoped slots. The `show-icon` and `show-line` props can be enabled, and a `#title` slot allows for custom content within each node's title. Accepts `show-icon`, `show-line` props.

```vue
<template>
  <div>
    <!-- Tree with custom node rendering -->
    <ux-tree
      :data-source="treeData"
      show-icon
      show-line
    >
      <template #title="{ title, key }">
        <span>{{ title }} ({{ key }})</span>
      </template>
    </ux-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Parent 0',
          key: '0-0',
          children: [
            {
              title: 'Child 0-0',
              key: '0-0-0',
              children: [
                { title: 'Leaf 0-0-0', key: '0-0-0-0' },
                { title: 'Leaf 0-0-1', key: '0-0-0-1' }
              ]
            },
            {
              title: 'Child 0-1',
              key: '0-0-1',
              children: [
                { title: 'Leaf 0-1-0', key: '0-0-1-0' }
              ]
            }
          ]
        },
        {
          title: 'Parent 1',
          key: '0-1',
          children: [
            { title: 'Child 1-0', key: '0-1-0' },
            { title: 'Child 1-1', key: '0-1-1' }
          ]
        }
      ]
    };
  }
};
</script>
```

--------------------------------

### Vue Form with Validation and Submission

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

A Vue.js component demonstrating a form with various input fields (username, email, password, age, gender) and a checkbox for terms. It utilizes the UXcool form components and their validation rules to ensure data integrity before submission. The `handleSubmit` method includes form validation, submission simulation, and error handling, while `handleReset` clears the form fields.

```vue
<template>
  <ux-form
    ref="loginForm"
    :validator="validatorOptions"
    layout="horizontal"
    :label-col="{span: 6}"
    :wrapper-col="{span: 14}"
    @submit="handleSubmit"
  >
    <!-- Username field -->
    <ux-form-item label="Username">
      <ux-field-decorator
        name="username"
        rules="required|min:3|max:20|alpha_num"
        :has-feedback="true"
      >
        <ux-input
          v-model="form.username"
          placeholder="Enter username"
        />
      </ux-field-decorator>
    </ux-form-item>

    <!-- Email field -->
    <ux-form-item label="Email">
      <ux-field-decorator
        name="email"
        rules="required|email"
        :has-feedback="true"
      >
        <ux-input
          v-model="form.email"
          type="email"
          placeholder="Enter email"
        />
      </ux-field-decorator>
    </ux-form-item>

    <!-- Password field -->
    <ux-form-item label="Password">
      <ux-field-decorator
        name="password"
        rules="required|min:8"
        :has-feedback="true"
      >
        <ux-input
          v-model="form.password"
          type="password"
          placeholder="Enter password"
        />
      </ux-field-decorator>
    </ux-form-item>

    <!-- Confirm password -->
    <ux-form-item label="Confirm">
      <ux-field-decorator
        name="confirmPassword"
        rules="required|confirmed:password"
        :has-feedback="true"
      >
        <ux-input
          v-model="form.confirmPassword"
          type="password"
          placeholder="Confirm password"
        />
      </ux-field-decorator>
    </ux-form-item>

    <!-- Age field with custom validation -->
    <ux-form-item label="Age">
      <ux-field-decorator
        name="age"
        rules="required|numeric|min_value:18|max_value:100"
      >
        <ux-input
          v-model="form.age"
          type="number"
          placeholder="Enter age"
        />
      </ux-field-decorator>
    </ux-form-item>

    <!-- Gender select -->
    <ux-form-item label="Gender">
      <ux-field-decorator
        name="gender"
        rules="required"
      >
        <ux-select v-model="form.gender" placeholder="Select gender">
          <ux-option value="male" label="Male" />
          <ux-option value="female" label="Female" />
          <ux-option value="other" label="Other" />
        </ux-select>
      </ux-field-decorator>
    </ux-form-item>

    <!-- Terms checkbox -->
    <ux-form-item :wrapper-col="{offset: 6, span: 14}">
      <ux-field-decorator
        name="terms"
        rules="required"
      >
        <ux-checkbox v-model="form.terms">
          I agree to the terms and conditions
        </ux-checkbox>
      </ux-field-decorator>
    </ux-form-item>

    <!-- Submit buttons -->
    <ux-form-item :wrapper-col="{offset: 6, span: 14}">
      <ux-button
        type="primary"
        html-type="submit"
        :loading="submitting"
      >
        Submit
      </ux-button>
      <ux-button style="margin-left: 10px" @click="handleReset">
        Reset
      </ux-button>
    </ux-form-item>
  </ux-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        age: '',
        gender: '',
        terms: false
      },
      submitting: false,
      validatorOptions: {
        locale: 'en'
      }
    };
  },
  methods: {
    async handleSubmit(e) {
      e.preventDefault();

      try {
        // Validate all fields
        const valid = await this.$refs.loginForm.validate();

        if (valid) {
          this.submitting = true;
          // Submit form data
          await this.submitToServer(this.form);
          this.$message.success('Form submitted successfully!');
        }
      } catch (error) {
        // Get all field errors
        const errors = this.$refs.loginForm.getFieldsError();
        console.error('Validation errors:', errors);
      } finally {
        this.submitting = false;
      }
    },
    handleReset() {
      this.$refs.loginForm.resetFields();
    },
    submitToServer(data) {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log('Submitting:', data);
          resolve();
        }, 1500);
      });
    }
  }
};
</script>
```

--------------------------------

### UXCool Draggable Tree Component Implementation

Source: https://context7.com/suning-cloud-team/uxcool/llms.txt

Enables drag-and-drop functionality for the ux-tree component, allowing users to reorder nodes. The `draggable` prop must be set to true, and an `@drop` event handler is used to manage the drop action and update the tree data. Requires `draggable` prop and `@drop` event.

```vue
<template>
  <div>
    <!-- Draggable tree -->
    <ux-tree
      :data-source="draggableTreeData"
      draggable
      @drop="handleDrop"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      draggableTreeData: []
    };
  },
  created() {
    // Initialize draggableTreeData with a deep copy of the original treeData
    this.draggableTreeData = JSON.parse(JSON.stringify(this.treeData));
  },
  methods: {
    handleDrop({ dragNode, dropNode, dropPosition }) {
      console.log('Drop:', { dragNode, dropNode, dropPosition });
      // Logic to update tree data based on drop action goes here
      // This might involve modifying the draggableTreeData array
    }
  }
};
</script>
```
Tokens:
Raw