From 82e164ce88fe882e63a38ad0c6af8a3fac2c33c8 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 4 Jan 2023 18:46:56 +0800
Subject: [PATCH] =?UTF-8?q?provide=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/button.md                       | 17 +++--
 packages/docs/select.md                       | 20 +++--
 .../src/components/_shared/utils.ts           |  5 +-
 .../src/components/option/OOption.vue         | 27 ++++---
 .../src/components/popup/OPopup.vue           |  8 +-
 .../src/components/select/OSelect.vue         | 76 +++++++++++--------
 .../components/select/__demo__/SelectSize.vue |  4 +-
 .../src/components/select/provide.ts          |  6 +-
 .../src/components/select/style/index.scss    |  1 +
 9 files changed, 95 insertions(+), 69 deletions(-)

diff --git a/packages/docs/button.md b/packages/docs/button.md
index f68d921f..8779fcb9 100644
--- a/packages/docs/button.md
+++ b/packages/docs/button.md
@@ -2,12 +2,19 @@
 
 ## props
 
-| name  | type        | 默认值    | 说明                                 |
-| :---- | :---------- | :-------- | :----------------------------------- |
-| shape | ShapeT      | 'normal'  | 形状: large \| normal \| small       |
-| size  | SizeT       | 'normal'  | 形状 normal \| round                 |
-| type  | ButtonTypeT | 'outline' | 形状 primary \|outline\| text \|link |
+| name    | type        | 默认值    | 说明                                 |
+| :------ | :---------- | :-------- | :----------------------------------- |
+| shape   | ShapeT      | 'normal'  | 形状: large \| normal \| small       |
+| size    | SizeT       | 'normal'  | 形状 normal \| round                 |
+| type    | ButtonTypeT | 'outline' | 形状 primary \|outline\| text \|link |
+| loading | boolean     | false     | 加载状态                             |
 
 ## event
 
 ## expose
+
+## slot
+
+| name | 说明     |
+| :--- | :------- |
+| icon | 按钮图标 |
diff --git a/packages/docs/select.md b/packages/docs/select.md
index 85703397..93baac4c 100644
--- a/packages/docs/select.md
+++ b/packages/docs/select.md
@@ -2,14 +2,18 @@
 
 ## props
 
-| name         | type     | 默认值   | 说明                                                          |
-| :----------- | :------- | :------- | ------------------------------------------------------------- |
-| model:value  | boolean  | false    | 开关状态                                                      |
-| shape        | ShapeT   | 'normal' | 形状: large \| normal \| small                                |
-| size         | SizeT    | 'normal' | 形状 normal \| round                                          |
-| disabled     | boolean  | false    | 形状                                                          |
-| loading      | boolean  | false    | 加载状态                                                      |
-| beforeChange | function | ()=>true | return Promise. resolve(true)继续切换，resolve(false)阻止切换 |
+| name            | type                             | 默认值             | 说明                                                          |
+| :-------------- | :------------------------------- | :----------------- | ------------------------------------------------------------- |
+| modelValue      | string \| number（v-model）      | false              | 开关状态                                                      |
+| shape           | ShapeT                           | 'normal'           | 形状: large \| normal \| small                                |
+| size            | SizeT                            | 'normal'           | 形状 normal \| round                                          |
+| disabled        | boolean                          | false              | 形状                                                          |
+| placeholder     | string                           | 'please select...' | 提示文本                                                      |
+| loading         | boolean                          | false              | 加载状态                                                      |
+| beforeChange    | function                         | ()=>true           | return Promise. resolve(true)继续切换，resolve(false)阻止切换 |
+| optionWrapClass | string                           | ''                 | 下拉的自定义类                                                |
+| optionPosition  | PopupPositionT                   | 'bl'               | 下拉的位置                                                    |
+| optionWidthMode | 'auto' \| 'min-width' \| 'width' | 'min-width'        | 下拉的宽度适配方式                                            |
 
 ## event
 
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index c471a595..7419a67e 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -4,7 +4,7 @@ import type { ThrottleSettings, DebounceSettings } from 'lodash-es';
 export function isBoolean(val: unknown): val is boolean {
   return typeof val === 'boolean';
 }
-export function isString(val: unknown): val is string {
+export function isString(val: unknown) {
   return typeof val === 'string';
 }
 export function isNumber(val: unknown): val is number {
@@ -13,6 +13,9 @@ export function isNumber(val: unknown): val is number {
 export function isFunction(val: unknown): val is Function {
   return typeof val === 'function';
 }
+export function isArray(val: unknown): val is Array<any> {
+  return Array.isArray(val);
+}
 export function isObject(val: unknown): val is Record<any, any> {
   return val !== null && typeof val === 'object';
 }
diff --git a/packages/opendesign/src/components/option/OOption.vue b/packages/opendesign/src/components/option/OOption.vue
index 82b2bdad..76aace7c 100644
--- a/packages/opendesign/src/components/option/OOption.vue
+++ b/packages/opendesign/src/components/option/OOption.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue';
-import { selectOptionUpdateFnInjectKey, selectOptionValueInjectKey } from '../select/provide';
+import { computed, inject } from 'vue';
+import { selectOptionInjectKey } from '../select/provide';
 
 interface OptionPropT {
   label?: string;
@@ -13,15 +13,18 @@ const props = withDefaults(defineProps<OptionPropT>(), {
   label: '',
 });
 
-const val = inject(selectOptionValueInjectKey);
-const updateFn = inject(selectOptionUpdateFnInjectKey);
+const selectInject = inject(selectOptionInjectKey);
 
-// 是否是select
-const isInSelect = !!updateFn;
+const currentVal = computed(() => {
+  if (selectInject) {
+    return selectInject.value.value;
+  }
+  return '';
+});
 
-if (props.value === val?.value) {
-  if (isInSelect) {
-    updateFn({
+if (props.value === currentVal.value) {
+  if (selectInject) {
+    selectInject.update({
       label: props.label || `${props.value}`,
       value: props.value,
     });
@@ -30,8 +33,8 @@ if (props.value === val?.value) {
 
 const clickOption = () => {
   if (!props.disabled) {
-    if (isInSelect) {
-      updateFn(
+    if (selectInject) {
+      selectInject.update(
         {
           label: props.label || `${props.value}`,
           value: props.value,
@@ -43,7 +46,7 @@ const clickOption = () => {
 };
 </script>
 <template>
-  <div class="o-option" :class="{ active: val === props.value, 'is-disabled': props.disabled }" @click="clickOption">
+  <div class="o-option" :class="{ active: currentVal === props.value, 'is-disabled': props.disabled }" @click="clickOption">
     <slot>{{ props.label || `${props.value}` }}</slot>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index fe9ca975..acdc699c 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -147,7 +147,7 @@ const wrapStyle = computed(() => ({
 const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({});
 
 // 是否需要挂载
-const mounted = ref(false);
+const toMount = ref(false);
 const isAnimating = ref(false);
 
 const { addResizeListener, removeResizeListener } = useResizeObserver();
@@ -242,7 +242,7 @@ const updateVisible = (isVisible: boolean, delay?: number) => {
     emits('change', isVisible);
 
     if (isVisible) {
-      mounted.value = true;
+      toMount.value = true;
 
       if (props.hideWhenTargetInvisible && targetEl) {
         intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting);
@@ -308,7 +308,7 @@ const handleTransitionStart = () => {
 const handleTransitionEnd = () => {
   isAnimating.value = false;
   if (!visible.value && props.unmountOnClose) {
-    mounted.value = false;
+    toMount.value = false;
   }
 };
 
@@ -424,7 +424,7 @@ onUnmounted(() => {
 </script>
 <template>
   <teleport v-if="wrapperEl" :to="props.wrapper">
-    <ResizeObserver v-if="mounted || visible" @resize="onPopupResize">
+    <ResizeObserver v-if="toMount || visible || !props.unmountOnClose" @resize="onPopupResize">
       <div
         ref="popupRef"
         class="o-popup"
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 890b8984..72b214a6 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -4,18 +4,24 @@ import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
 import { IconArrowTraingleDown } from '../icons';
 import { OPopup, PopupPositionT } from '../popup';
-import { selectOptionUpdateFnInjectKey, selectOptionValueInjectKey } from './provide';
+import { selectOptionInjectKey } from './provide';
 import { SelectOptionT } from './types';
 
 interface SelectPropT {
+  modelValue: string | number;
   size?: SizeT;
   shape?: ShapeT;
-  modelValue: string | number;
   placeholder?: string;
   disabled?: boolean;
   optionPosition?: PopupPositionT;
   optionWidthMode?: 'auto' | 'min-width' | 'width';
   optionWrapClass?: string;
+  unmountOnClose?: boolean;
+  /**
+   * 默认初始值对应的label显示，不传则使用modelValue
+   * 当unmountOnClose为true时，存在初始值对应label无法获取问题，可使用该属性指定初始值
+   */
+  defaultLabel?: string;
 }
 const props = withDefaults(defineProps<SelectPropT>(), {
   modelValue: '',
@@ -25,30 +31,33 @@ const props = withDefaults(defineProps<SelectPropT>(), {
   optionPosition: 'bl',
   optionWidthMode: 'min-width',
   optionWrapClass: '',
+  defaultLabel: '',
+  unmountOnClose: true,
 });
 
-const activeLabel = ref('');
+const activeLabel = ref(props.defaultLabel || props.modelValue);
 const activeVal = ref(props.modelValue);
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void;
+  (e: 'change', value: string | number): void;
+}>();
 const selectRef = ref<HTMLElement>();
 
 const showOption = ref(false);
-provide(selectOptionUpdateFnInjectKey, (val: SelectOptionT, emit?: boolean) => {
-  activeLabel.value = val.label;
-  if (emit) {
-    emits('update:modelValue', val.value);
-    activeVal.value = val.value;
-    showOption.value = false;
-  }
-});
-
-provide(selectOptionValueInjectKey, activeVal);
+provide(selectOptionInjectKey, {
+  value: activeVal,
+  update: (val: SelectOptionT, emit?: boolean) => {
+    activeLabel.value = val.label;
+    console.log(activeLabel.value);
 
-const onOptionChange = (visible: boolean) => {
-  if (visible) {
-    console.log(selectRef.value?.clientWidth);
-  }
-};
+    if (emit) {
+      emits('update:modelValue', val.value);
+      emits('change', val.value);
+      activeVal.value = val.value;
+      showOption.value = false;
+    }
+  },
+});
 </script>
 <template>
   <div
@@ -64,19 +73,20 @@ const onOptionChange = (visible: boolean) => {
         </span>
       </slot>
     </span>
+
+    <OPopup
+      v-model:visible="showOption"
+      :unmount-on-close="props.unmountOnClose"
+      :position="props.optionPosition"
+      :target="selectRef"
+      trigger="click"
+      :offset="4"
+      :adjust-min-width="props.optionWidthMode === 'min-width'"
+      :adjust-width="props.optionWidthMode === 'width'"
+    >
+      <div class="o-select-options" :class="[`o-options-size-${props.size}`, props.optionWrapClass]">
+        <slot></slot>
+      </div>
+    </OPopup>
   </div>
-  <OPopup
-    v-model:visible="showOption"
-    :position="props.optionPosition"
-    :target="selectRef"
-    trigger="click"
-    :offset="4"
-    :adjust-min-width="props.optionWidthMode === 'min-width'"
-    :adjust-width="props.optionWidthMode === 'width'"
-    @change="onOptionChange"
-  >
-    <div class="o-select-options" :class="[`o-options-size-${props.size}`, props.optionWrapClass]">
-      <slot></slot>
-    </div>
-  </OPopup>
 </template>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectSize.vue b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
index 66c80f65..139ef953 100644
--- a/packages/opendesign/src/components/select/__demo__/SelectSize.vue
+++ b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
@@ -2,7 +2,6 @@
 import { ref } from 'vue';
 import { OSelect } from '../index';
 import { OOption } from '../../option';
-const selectVal = ref('opt1');
 const selectVal2 = ref('');
 const options = [
   { label: 'option 1', value: 'opt1' },
@@ -10,11 +9,12 @@ const options = [
   { label: 'option 3', value: 'opt3' },
   { label: 'option 4', value: 'opt4' },
 ];
+const selectVal = ref(options[0].value);
 </script>
 <template>
   <h4>Size</h4>
   <section>
-    <OSelect v-model="selectVal" size="large">
+    <OSelect v-model="selectVal" size="large" :default-label="options[0].label">
       <OOption :label="options[0].label" :value="options[0].value" />
       <OOption :label="options[1].label" :value="options[1].value" />
       <OOption :label="options[2].label" :value="options[2].value" />
diff --git a/packages/opendesign/src/components/select/provide.ts b/packages/opendesign/src/components/select/provide.ts
index 48ccc966..67700a3c 100644
--- a/packages/opendesign/src/components/select/provide.ts
+++ b/packages/opendesign/src/components/select/provide.ts
@@ -2,8 +2,6 @@ import { InjectionKey, Ref } from 'vue';
 import { SelectOptionT } from './types';
 
 
-export const selectOptionUpdateFnInjectKey: InjectionKey<(val: SelectOptionT, emit?: boolean) => void> =
-  Symbol('provide-select-option/updateFn');
+export const selectOptionInjectKey: InjectionKey<{ update: (val: SelectOptionT, emit?: boolean) => void, value: Ref<string | number> }> =
+  Symbol('provide-select-option');
 
-export const selectOptionValueInjectKey: InjectionKey<Ref<string | number>> =
-  Symbol('provide-select-option/value');
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index 5f2b6d7a..6b4f9d06 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -23,6 +23,7 @@
   outline: none;
   border: none;
   padding: 0;
+  color: inherit;
   cursor: inherit;
   background-color: transparent;
   display: inline-flex;
-- 
Gitee