From 08f6c45259532f46dd2d0e7a6dba2ea3401d82c9 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Sun, 5 Mar 2023 11:27:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Edropdown=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E8=8F=9C=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dropdown/ODropdown.vue     |  68 +++++++++---
 .../src/components/dropdown/ODropdownItem.vue |  24 +++++
 .../dropdown/__demo__/DropdownBasic.vue       |  25 +++++
 .../dropdown/__demo__/IndexDropdown.vue       |  11 ++
 .../src/components/dropdown/index.ts          |  18 ++++
 .../src/components/dropdown/provide.ts        |   5 +
 .../src/components/dropdown/style/index.scss  |  32 ++++++
 .../src/components/dropdown/style/index.ts    |   3 +
 .../src/components/dropdown/style/var.scss    |  25 +++++
 .../src/components/dropdown/types.ts          | 100 ++++++++++++++++++
 packages/portal/src/router.ts                 |   6 ++
 11 files changed, 304 insertions(+), 13 deletions(-)
 create mode 100644 packages/opendesign/src/components/dropdown/ODropdownItem.vue
 create mode 100644 packages/opendesign/src/components/dropdown/__demo__/DropdownBasic.vue
 create mode 100644 packages/opendesign/src/components/dropdown/__demo__/IndexDropdown.vue
 create mode 100644 packages/opendesign/src/components/dropdown/index.ts
 create mode 100644 packages/opendesign/src/components/dropdown/provide.ts
 create mode 100644 packages/opendesign/src/components/dropdown/style/index.scss
 create mode 100644 packages/opendesign/src/components/dropdown/style/index.ts
 create mode 100644 packages/opendesign/src/components/dropdown/style/var.scss
 create mode 100644 packages/opendesign/src/components/dropdown/types.ts

diff --git a/packages/opendesign/src/components/dropdown/ODropdown.vue b/packages/opendesign/src/components/dropdown/ODropdown.vue
index ee5c145d..cf48944f 100644
--- a/packages/opendesign/src/components/dropdown/ODropdown.vue
+++ b/packages/opendesign/src/components/dropdown/ODropdown.vue
@@ -1,17 +1,59 @@
 <script setup lang="ts">
-import { PopupTriggerT } from '../popup';
-
-interface DropdownPropT {
-  /**
-   * 下拉菜单触发方式
-   */
-  trigger?: PopupTriggerT;
-  optionPosition:
-}
-
-const props = withDefaults(defineProps<DropdownPropT>(), {
-  trigger: 'click',
+import { provide, ref, watch } from 'vue';
+
+import { OPopup } from '../popup';
+import { dropdownProps } from './types';
+import { dropdownInjectKey } from './provide';
+import { isUndefined } from '../_shared/is';
+
+const props = defineProps(dropdownProps);
+
+const emits = defineEmits<{
+  (e: 'update:visible', val: boolean): void;
+  (e: 'visible-change', val: boolean): void;
+}>();
+
+const dropdownRef = ref<HTMLElement>();
+
+const isVisible = ref(props.visible ?? props.defaultVisible);
+
+watch(
+  () => props.visible,
+  (val) => {
+    isVisible.value = isUndefined(val) ? false : true;
+  }
+);
+
+const updateVisible = (val: boolean) => {
+  isVisible.value = val;
+  emits('update:visible', val);
+  emits('visible-change', val);
+};
+
+watch(isVisible, (val) => {
+  updateVisible(val);
 });
+
+provide(dropdownInjectKey, { updateVisible });
 </script>
 
-<template></template>
+<template>
+  <div ref="dropdownRef" class="o-dropdown">
+    <slot></slot>
+    <OPopup
+      v-model:visible="isVisible"
+      :transition="props.transition"
+      :unmount-on-hide="props.unmountOnHide"
+      :position="props.optionPosition"
+      :target="dropdownRef"
+      :trigger="props.trigger"
+      :offset="4"
+      :adjust-min-width="props.optionWidthMode === 'min-width'"
+      :adjust-width="props.optionWidthMode === 'width'"
+    >
+      <ul class="o-dropdown-list" :class="[props.optionWrapClass]">
+        <slot name="dropdown"></slot>
+      </ul>
+    </OPopup>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/dropdown/ODropdownItem.vue b/packages/opendesign/src/components/dropdown/ODropdownItem.vue
new file mode 100644
index 00000000..54c0ca1c
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/ODropdownItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import { dropdownInjectKey } from './provide';
+import { dropdownItemProps } from './types';
+
+const props = defineProps(dropdownItemProps);
+const dropdownInjection = inject(dropdownInjectKey, null);
+
+const onItemClick = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  dropdownInjection?.updateVisible(false);
+};
+</script>
+
+<template>
+  <li class="o-dropdown-item" :class="{ 'o-dropdown-disabled': props.disabled }" @click="onItemClick">
+    <slot>{{ props.label || `${props.value}` }}</slot>
+  </li>
+</template>
+
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/dropdown/__demo__/DropdownBasic.vue b/packages/opendesign/src/components/dropdown/__demo__/DropdownBasic.vue
new file mode 100644
index 00000000..3227b4dc
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/__demo__/DropdownBasic.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ODropdown, ODropdownItem } from '../index';
+
+import '../../button/style';
+import { OButton } from '../../button';
+
+const options = [
+  { label: '操作一', value: 'opt1' },
+  { label: '操作二', value: 'opt2' },
+  { label: '操作三', value: 'opt3' },
+  { label: '操作四', value: 'opt4' },
+];
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <ODropdown>
+      <OButton>Click Me</OButton>
+      <template #dropdown>
+        <ODropdownItem v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </template>
+    </ODropdown>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/dropdown/__demo__/IndexDropdown.vue b/packages/opendesign/src/components/dropdown/__demo__/IndexDropdown.vue
new file mode 100644
index 00000000..0408b4ca
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/__demo__/IndexDropdown.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import '../style';
+
+import DropdownBasic from './DropdownBasic.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <DropdownBasic />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/dropdown/index.ts b/packages/opendesign/src/components/dropdown/index.ts
new file mode 100644
index 00000000..b6ff5169
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/index.ts
@@ -0,0 +1,18 @@
+import type { App } from 'vue';
+
+import _ODropdown from './ODropdown.vue';
+import _ODropdownItem from './ODropdownItem.vue';
+
+const ODropdown = Object.assign(_ODropdown, {
+  install(app: App) {
+    app.component(_ODropdown.name, _ODropdown);
+  },
+});
+
+const ODropdownItem = Object.assign(_ODropdownItem, {
+  install(app: App) {
+    app.component(_ODropdownItem.name, _ODropdownItem);
+  },
+});
+
+export { ODropdown, ODropdownItem };
diff --git a/packages/opendesign/src/components/dropdown/provide.ts b/packages/opendesign/src/components/dropdown/provide.ts
new file mode 100644
index 00000000..77ee794c
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/provide.ts
@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+
+export const dropdownInjectKey: InjectionKey<{
+  updateVisible: (val: boolean) => void;
+}> = Symbol('provide-dropdown');
diff --git a/packages/opendesign/src/components/dropdown/style/index.scss b/packages/opendesign/src/components/dropdown/style/index.scss
new file mode 100644
index 00000000..efd9d348
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/style/index.scss
@@ -0,0 +1,32 @@
+@use './var.scss';
+
+.o-dropdown-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: var(--dropdown-list-bg);
+  box-shadow: var(--dropdown-list-shadow);
+  border-radius: var(--dropdown-list-radius);
+  border: var(--dropdown-list-bd);
+}
+
+.o-dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: var(--dropdown-item-padding);
+  background-color: var(--dropdown-item-bg-color);
+  font-size: var(--dropdown-item-text-size);
+  line-height: var(--dropdown-item-text-height);
+  cursor: pointer;
+
+  &:not(.o-dropdown-item-disabled) {
+    &:hover {
+      background-color: var(--dropdown-item-bg-color-hover);
+      color: var(--dropdown-item-color-hover);
+    }
+    &.active {
+      color: var(--dropdown-item-color-active);
+      background-color: var(--dropdown-item-bg-color-active);
+    }
+  }
+}
diff --git a/packages/opendesign/src/components/dropdown/style/index.ts b/packages/opendesign/src/components/dropdown/style/index.ts
new file mode 100644
index 00000000..97806f75
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/style/index.ts
@@ -0,0 +1,3 @@
+import '../../style';
+import '../../popup/style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/dropdown/style/var.scss b/packages/opendesign/src/components/dropdown/style/var.scss
new file mode 100644
index 00000000..702a0135
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/style/var.scss
@@ -0,0 +1,25 @@
+.o-dropdown-list {
+  --dropdown-list-bg: var(--o-color-control-light);
+  --dropdown-list-shadow: none;
+  --dropdown-list-bd: 1px solid var(--o-color-primary2);
+  --dropdown-list-radius: var(--o-radius-s);
+}
+
+.o-dropdown-item {
+  --dropdown-item-color: var(--o-color-info2);
+  --dropdown-item-color-hover: var(--o-color-info1-inverse);
+  --dropdown-item-color-active: var(--o-color-info1-inverse);
+  --dropdown-item-color-disabled: var(--o-color-info4);
+
+  --dropdown-item-bg-color: transparent;
+  --dropdown-item-bg-color-hover: var(--o-color-primary3-light);
+  --dropdown-item-bg-color-active: var(--o-color-primary2-light);
+  --dropdown-item-bg-color-disabled: var(--o-color-control4-light);
+
+  --dropdown-item-text-size: var(--o-font_size-text);
+  --dropdown-item-text-height: var(--o-line_height-text);
+
+  --dropdown-item-padding: 5px 12px;
+  --dropdown-item-text-size: var(--o-font_size-text);
+  --dropdown-item-text-height: var(--o-line_height-text);
+}
diff --git a/packages/opendesign/src/components/dropdown/types.ts b/packages/opendesign/src/components/dropdown/types.ts
new file mode 100644
index 00000000..6db69939
--- /dev/null
+++ b/packages/opendesign/src/components/dropdown/types.ts
@@ -0,0 +1,100 @@
+import { PopupPositionT, PopupTriggerT } from '../popup';
+import { ExtractPropTypes, PropType } from 'vue';
+import type { SizeT, RoundT } from '../_shared/global';
+
+export const dropdownProps = {
+  /**
+   * 弹出框是否可见
+   */
+  visible: {
+    type: Boolean,
+  },
+  /**
+   * 非受控模式，弹出框是否默认可见
+   */
+  defaultVisible: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 大小
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>,
+  },
+  /**
+   * 下拉选项触发方式
+   */
+  trigger: {
+    type: String as PropType<PopupTriggerT>,
+    default: 'click',
+  },
+  /**
+   * 下拉选项位置
+   */
+  optionPosition: {
+    type: String as PropType<PopupPositionT>,
+    default: 'bl',
+  },
+  /**
+   * 下拉选项宽度自适应规则
+   * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致
+   */
+  optionWidthMode: {
+    type: String as PropType<'auto' | 'min-width' | 'width'>,
+    default: 'min-width',
+  },
+  /**
+   * 下拉容器自定义类
+   */
+  optionWrapClass: {
+    type: String,
+  },
+  /**
+   * 是否在结束选择时，卸载下拉选项
+   * v-model
+   */
+  unmountOnHide: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+  },
+};
+
+export type DropdownPropsT = ExtractPropTypes<typeof dropdownProps>;
+
+export const dropdownItemProps = {
+  /**
+   * 显示文本
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 选项值
+   */
+  value: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+  },
+};
+
+export type DropdownItemPropsT = ExtractPropTypes<typeof dropdownItemProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 4f1533f3..1e512dd6 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -153,6 +153,12 @@ export const routes = [
     label: '菜单',
     component: () => import('@components/menu/__demo__/IndexMenu.vue'),
   },
+  {
+    path: '/dropdown',
+    name: 'ODropdown',
+    label: '下拉菜单',
+    component: () => import('@components/dropdown/__demo__/IndexDropdown.vue'),
+  },
 ];
 
 export const router = createRouter({
-- 
Gitee