open-index/open-npm huggingface dataset:
npm package: @moment-design/resolver
Description: Resolver for Moment Design Vue
Author: Moment Design Team
Latest version: 1.1.3

A Resolver for Moment Design Vue

## Installation

```
npm install @moment-design/resolver --registry="http://121.46.196.20:4873/"
```

## Notice

 ```unplugin-vue-components  >= 0.22.4```

# Examples

```typescript
// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite';
import { MoResolver } from "@moment-design/resolver";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [MoResolver()],
    }),
    Components({
      resolvers: [
        MoResolver({
          sideEffect: true
        })
      ]
    })
  ]
});
```

```html
<!-- demo.vue -->

<script setup lang="ts">
const handleClick = (): void => {
  MMessage.success("Ok！");
};
</script>

<template>
  <m-button @click="handleClick">Button</m-button>
</template>

```
npm package: @moment-design/resource-management
Description: 云端资源管理组件
Latest version: 0.1.3

# ResourceManagement

云端资源管理组件

## 运行环境

| 名称                   | 版本号 |
| ---------------------- | ------ |
| Node.js                | 15+    |
| NPM                    | 7+     |
| Vue.js                 | 3+     |
| @moment-design/web-vue | 1+     |

## API说明

### 初始化

| 参数名        | 描述               | 类型          | 必须 | 默认值 |
| ------------- | ------------------ | ------------- | ---- | ------ |
| baseUrl       | 云资源请求域名     | string        | 是   | -      |
| errorCallback | 云资源请求错误回调 | (err) => void | 是   | -      |
| getXToken     | 云资源请求x-token  | () => string  | 是   | -      |

### 函数调用

| 参数名      | 描述                                | 类型                    | 必须 | 默认值 |
| ----------- | ----------------------------------- | ----------------------- | ---- | ------ |
| type        | 文件类型，image：图片，video：视频  | string                  | 否   | image  |
| limit       | 多选数量限制，0：无限制             | number                  | 否   | 1      |
| uploadLimit | 上传文件数量限制，0：无限制         | number                  | 否   | 0      |
| uploadSize  | 上传文件大小限制，单位MB，0：无限制 | number                  | 否   | 0      |
| confirm     | 回调函数                            | (fileList: []) => void; | 是   | -      |



## 使用组件

1. 安装依赖

   ```bash
   npm install @moment-design/resource-management --save
   ```

2. 引用组件

   在`main.ts`中全局引入组件

   ```typescript
   import { createApp } from "vue";
   import app from "./App.vue";
   import TheFileManager from '@moment-design/resource-management';
   
   const App = createApp(app);
   App.use(TheFileManager,{
       baseUrl: "",
       errorCallback: (err) => {
           console.error("=========errorCallback=============", err)
     	},
       getXToken: () => {
           return ""
       }
   });
   
   ```

3. 函数调用

   ```typescript
   <template>
     <m-button @click="onShow(1)">点击选择1张图片</m-button>
     <p>{{ list1 }}</p>
   
     <m-button @click="onShow(2)">点击选择多张图片</m-button>
     <p>{{ list2 }}</p>
   
     <m-button @click="onShow(3)">点击选择视频</m-button>
     <p>{{ list3 }}</p>
   </template>
   <script lang="ts" setup>
   import { ref } from '@vue/runtime-core';
   import theFileManager from '@moment-design/resource-management';
   
   const list1 = ref<any>([]);
   const list2 = ref<any>([]);
   const list3 = ref<any>([]);
   
   const onShow = (index: number): void => {
     theFileManager.show({
       type: index === 3 ? 'video' : 'image',
       limit: index === 2 ? 0 : 1,
       confirm: (fileList: any[]) => {
         if (index === 1) {
           list1.value = fileList;
         }
         if (index === 2) {
           list2.value = fileList;
         }
         if (index === 3) {
           list3.value = fileList;
         }
       },
     });
   };
   </script>
   ```
npm package: @moment-design/select-tag-search
Description: `安装依赖`
Latest version: 0.0.7

## 使用组件

`安装依赖`

```
npm install @moment-design/select-tag-search --save
```

`使用组件`

```
import lSelectTag from '@moment-design/select-tag-search';

<template>
  <m-select
    ref="selectTag"
    v-bind="$attrs"
    :popup-visible="popupVisible"
    :filter-option="true"
    v-model:input-value="inputValue"
    class="l-select-tag"
  >
    <template v-if="btnText" #prefix>
      <span>
        <div class="l-btn-text" @click.stop="prefixClick">{{ btnText }}</div>
      </span>
    </template>
    <template v-for="name in Object.keys($slots)" #[name]="slotData">
      <slot :name="name" v-bind="slotData"></slot>
    </template>
  </m-select>
</template>
<script>
import { computed, ref } from 'vue';
import LSelectTag from '@moment-design/select-tag-search';
import { data as staffList } from './data.ts';
import ModalTree from './tree';
const data = ref([]);
const tree = ref();

const submit = (ids) => {
  data.value = ids;
};

const options = computed(() => {
  return flattenTree(JSON.parse(JSON.stringify(staffList))).map((v) => ({
    ...v,
    value: v.id,
    label: v.departmentName,
  }));

  function flattenTree(tree) {
    return tree.reduce((acc, node) => {
      acc.push(node);
      if (node.accountDepResults && node.accountDepResults.length > 0) {
        acc.push(...flattenTree(node.accountDepResults));
        delete node.accountDepResults;
      }

      return acc;
    }, []);
  }
});

const prefixClick = () => {
  tree.value.open({ ids: data.value });
};
</script>
```

## API

Events

Props `config`

属性插槽同步组件库 select 组件,  prefix 暴露事件  prefixClick
npm package: @moment-design/user-avatar-group
Description: 用户头像图标组组件
Author: lean
Latest version: 0.0.6

# 用户头像图标组组件

## 使用组件

`安装依赖`

```
npm install @moment-design/user-avatar-group --save
```

`使用组件`

```ts
<template>
  <UserAvatarGroup :config="config"></UserAvatarGroup>
</template>

<script setup lang="ts">
import UserAvatarGroup from '@moment-design/user-avatar-group';
import "@moment-design/user-avatar-group/dist/css/index.css";
import "@moment-design/user-avatar-group/dist/css/index.less";

const config = {
  max: 6,
  fieldNames: { name: 'name', avatar: 'avatar' },
  list: [
    {
      avatar:
        'https://img1.baidu.com/it/u=2426485654,2618557214&fm=253&fmt=auto?w=80&h=80',
      name: '林泽宇',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=500987579,2775878152&fm=253&app=138&size=w931',
      name: '苏逸飞',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=1411247269,2866844638&fm=253&app=138&size=w931',
      name: '叶婉清',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=1700500226,1005113141&fm=253&app=138&size=w931',
      name: '唐静萱',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=425610652,579984881&fm=253&app=138&size=w931',
      name: '欧阳睿泽',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=1758351609,624421516&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
      name: '端木诗涵',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=320167195,1945895376&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      name: '沈逸尘',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=2831180451,1376171740&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=450',
      name: '楚凝香',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=1224989404,783637058&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      name: '长孙绮梦',
    },
    {
      avatar:
        'https://img0.baidu.com/it/u=2639370331,3446389399&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=402',
      name: '许静姝',
    },
  ],
};
</script>
```

## API

Props

| 参数名     | 描述                        | 类型                        | 默认值                           |
| ---------- | --------------------------- | --------------------------- | -------------------------------- |
| max        | 最大显示个数，超过显示 + 号 | number                      | 6                                |
| fieldNames | 自定义字段                  | Object                      | {name: 'name', avatar: 'avatar'} |
| list       | 展示数据                    | any[{avatar: '', name: ''}] | []                               |
npm package: @moment-design/user-info
Description: 用户信息
Author: cqq
Latest version: 0.0.1

## 使用组件

`安装依赖`

```
npm install @moment-design/user-info --save
```

`使用组件`

```
import userInfo from '@moment-design/user-info';

<user-info
    src="https://syycdn.dongchali.net/upload/2024-12-12/1d3ee158-135b-4bbb-b7c1-b13642007719.jpeg"
    name="用户名称"
    corp-name="微信"
>
</user-info>

```

## API

Events

Props `config`

| 参数名  | 描述     | 类型   | 默认值 |
| ------- | -------- | ------ | ------ |
| size | 头像大小 |  number  | 32  |
| radius | 头像圆角 | [number , string]  | 50% |
| src | 头像地址 | string  |  |
| name | 用户名称 | string  |  |
| nameSize | 用户名称字体大小 | string  | 14px |
| corpName | 用户公司标识 | string  |  |
| corpNameSize | 用户公司标识字体大小 | string  | 14px |
| popover | 用户左侧头像鼠标悬停是否展示气泡浮层 | boolean  | true |
| popoverWidth | 用户左侧头像气泡浮层宽度 | number  | 320 |

Slots
| 插槽名 | 描述 |
| ----------- | ----------- |
| rightInfo | 用户名称后插槽 |
| rightAllInfo | 用户右侧全部信息插槽 |


| 事件名    | 描述         | 参数         |
| ----------- | ----------- | ----------- |
| handle-click     | 点击右侧用户信息操作 |  |
npm package: @moment-design/vite-plugin-mo-vue-docs
Description: Provides Markdown to Vue Component in Mo Vue Docs
Author: MomentDesign Team
Latest version: 0.1.0

# `@arco-design/vite-plugin-arco-vue-docs`

Provides Markdown to Vue Component in Arco Vue Docs

## Usage

```tsx
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDocs from '@arco-design/vite-plugin-arco-vue-docs';

export default defineConfig({
  plugins: [vueDocs(), vue()],
});
```
npm package: @moment-design/web-vue
Description: Mo Design Vue: A Vue.js 3 UI Library
Author: Moment Design Team
Latest version: 1.5.13

<div align="center">
  <a href="https://ui.tp.shopping818.com/" target="_blank">

  </a>
</div>
<div align="center">
  <h1>Mo Design</h1>
</div>

<div align="center">

基于 [Mo Design](https://ui.tp.shopping818.com/) 的 Vue UI 组件库。

</div>

# 特性

## 全面

60 多个开箱即用的高质量组件, 可以覆盖绝大部份的业务场景。

## 主题配置

海量的样式 tokens, 支持全局以及组件级别的主题配置。有以下 2 种方式可以定制主题：

- [Less-loader](https://arco.design/vue/docs/theme)
- [风格配置平台](https://arco.design/themes) - 推荐!

## TypeScript 友好

所有组件都是用 TypeScript 编写的，所以天然的类型友好。

# 安装

[npm package](https://www.npmjs.com/package/@moment-design/web-vue)

```bash
// npm
npm install @moment-design/web-vue --registry="http://121.46.196.20:4873/"

// with yarn
yarn add @moment-design/web-vue --registry http://121.46.196.20:4873/
```

# 例子

```typescript
import { createApp } from 'vue';
import MoVue from '@moment-design/web-vue';
import App from './App.vue';
import '@moment-design/web-vue/dist/mo.css';

const app = createApp(App);
app.use(MoVue);
app.mount('#app');
```

# 最佳实践

![](https://fe-1253383455.cos.ap-nanjing.myqcloud.com/temp/iShot_2022-09-02_15.21.52.gif)