Merge branch 'dev' of gitee.com:devui/vue-devui into dev

Author: ErKeLost

README.md

@@ -1,13 +1,17 @@
 <p align="center">
  <a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
- <img alt="DevUI Logo" src="packages/devui-vue/public/logo.svg?sanitize=true" width="180" style="max-width:100%;">
+ <img alt="DevUI Logo" src="https://gitee.com/devui/vue-devui/raw/dev/packages/devui-vue/public/logo.svg?sanitize=true" width="180" style="max-width:100%;">
  </a>
 </p>
 
 Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 [https://github.com/devcloudfe/ng-devui](https://github.com/devcloudfe/ng-devui)，倡导`沉浸`、`灵活`、`至简`的设计价值观。
 
 DevUI 官方网站：[https://devui.design](https://devui.design)
 
+DevUI开源项目正在参加[2021年度OSC中国开源项目评选](https://www.oschina.net/project/top_cn_2021/?id=205&ticket=4b10864b99e57311d9897964acfc0c9c)，欢迎大家给我们`DevUI Design`投上宝贵的一票：
+
+[DevUI开源项目-2021年度OSC中国开源项目评选投票](https://www.oschina.net/project/top_cn_2021/?id=205&ticket=4b10864b99e57311d9897964acfc0c9c)
+
 想了解[DevUI](https://devui.design)开源的故事，可以阅读以下文章：
 
 [DevUI开源的故事](https://juejin.cn/post/7029092585452863525/)
@@ -70,6 +74,7 @@ yarn add vue-devui
 
 ## 2. 全量引入
 
+在`main.ts`文件中编写以下代码：
 ```
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -88,6 +93,7 @@ createApp(App)
 
 除了全量引入，我们也支持单个组件按需引入。
 
+在`main.ts`文件中编写以下代码：
 ```
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -103,7 +109,32 @@ createApp(App)
 .mount('#app')
 ```
 
-## 4. 使用
+## 4. 配置自动按需引入`unplugin-vue-components`（推荐）
+
+配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
+
+在`vite.config.ts`文件中添加以下代码：
+```
+import Components from 'unplugin-vue-components/vite'
+import { DevUiResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+ plugins: [
+ vue(),
+
+ // 新增
+ Components({
+ resolvers: [
+ DevUiResolver()
+ ]
+ })
+ ]
+})
+```
+
+配置了以上插件，就可以直接在代码中使用`Vue DevUI`的组件，而无需在`main.ts`文件中引入`Vue DevUI`。
+
+## 5. 使用
 
 ```
 <template>
@@ -113,7 +144,7 @@ createApp(App)
 
 # 图标库
 
-图标库可以使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
+图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
 
 ## 使用DevUI图标库
 
@@ -141,36 +172,6 @@ import '@devui-design/icons/icomoon/devui-icon.css'
 <d-icon name="love" color="red"></d-icon>
 ```
 
-## 使用第三方图标库
-
-如果有第三方图标库，可以用类似的方式引入。
-
-### 引入
-
-在`main.ts`文件中，编写以下代码：
-
-```
-import 'your-folder/my-icon.css'
-```
-
-### 使用
-
-```
-<d-icon classPrefix="my-icon" name="love" color="red"></d-icon>
-```
-
-其中的`classPrefix`参数的值，应该和你的字体图标样式文件`my-icon.css`里定义的样式前缀保持一致。
-
-比如`my-icon.css`里的图标样式：
-
-```css
-.my-icon-branch-node:before {
-content: "\E001";
-}
-```
-
-那么`classPrefix`就是`my-icon`。
-
 # License
 
 [MIT](https://gitee.com/devui/vue-devui/blob/dev/LICENSE)

packages/devui-vue/devui/accordion/src/accordion-item.tsx

@@ -1,13 +1,92 @@
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs, computed, inject } from 'vue'
+import { accordionProps } from './accordion-types'
+import { AccordionItemClickEvent, AccordionMenuItem } from './accordion.type'
+import { getRootSlots } from '../src/utils'
 
 export default defineComponent({
  name: 'DAccordionItem',
  props: {
-
+ item: Object as () => AccordionMenuItem,
+ deepth: {
+ type: Number,
+ default: 0
+ },
+ parent: {
+ type: Object as () => AccordionMenuItem,
+ default: null
+ },
+ ...accordionProps
  },
- setup() {
+ setup(props) {
+ const {
+ item,
+ deepth,
+ parent,
+ titleKey,
+ activeKey,
+ disabledKey,
+ } = toRefs(props)
+
+ const rootSlots = getRootSlots()
+ const accordionCtx = inject('accordionContext') as any
+
+ let parentValue = parent.value
+ let deepValue = deepth.value
+
+ const disabled = computed(() => {
+ return item.value && item.value[disabledKey.value]
+ })
+ const title = computed(() => {
+ return item.value && item.value[titleKey.value]
+ })
+ const active = computed(() => {
+ return item.value && item.value[activeKey.value]
+ })
+
+ const childActived = computed(() => {
+ return active.value
+ })
+
+ const itemClick = (itemEvent: AccordionItemClickEvent) => {
+ if (item.value && !disabled.value) {
+ accordionCtx.itemClickFn(itemEvent)
+ }
+ }
+
  return () => {
- return <li>d-accordion-item</li>
+ return (
+ <>
+ <div
+ class={[
+ 'devui-accordion-item-title',
+ 'devui-over-flow-ellipsis',
+ childActived.value && 'active',
+ disabled.value && 'disabled'
+ ]}
+ title={title.value}
+ style={{ textIndent: deepValue * 20 + 'px' }}
+ onClick={(e) =>
+ itemClick({
+ item: item.value,
+ parent: parentValue,
+ event: e
+ })
+ }
+ >
+ <div
+ class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
+ style={{ left: deepValue * 20 + 10 + 'px' }}
+ ></div>
+ {!rootSlots.itemTemplate && <>{title.value}</>}
+ {rootSlots.itemTemplate &&
+ rootSlots.itemTemplate?.({
+ parent: parentValue,
+ deepth: deepValue,
+ item: item.value
+ })}
+ </div>
+ </>
+ )
  }
  }
-})
+})