Skip to content

Commit

Permalink
Merge branch dev into main
Browse files Browse the repository at this point in the history
xingyan95 committed Apr 13, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 8afdb42 + fccccc2 commit f154140
Showing 11 changed files with 170 additions and 105 deletions.
94 changes: 48 additions & 46 deletions packages/devui-vue/devui/category-search/src/category-search.tsx
Original file line number Diff line number Diff line change
@@ -12,51 +12,53 @@ import { useCategorySearch } from './composables/use-category-search';
import './category-search.scss';

export default defineComponent({
name: 'DCategorySearch',
props: categorySearchProps,
emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
setup(props: CategorySearchProps, ctx: SetupContext) {
const {
rootRef,
scrollBarRef,
inputRef,
isHover,
containerClasses,
innerSelectedTags,
joinLabelTypes,
showExtendedConfig,
operationConfig,
onSearch,
} = useCategorySearch(props, ctx);
name: 'DCategorySearch',
props: categorySearchProps,
emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
setup(props: CategorySearchProps, ctx: SetupContext) {
const {
rootRef,
scrollBarRef,
inputRef,
isHover,
containerClasses,
innerSelectedTags,
joinLabelTypes,
showExtendedConfig,
operationConfig,
onSearch,
} = useCategorySearch(props, ctx);

return () => (
<div
ref={rootRef}
class={containerClasses.value}
onMouseenter={() => (isHover.value = true)}
onMouseleave={() => (isHover.value = false)}>
<div class="dp-category-search-icon" onClick={onSearch}>
<SearchIcon />
</div>
<div ref={scrollBarRef} class="dp-category-search-line-container">
<ul class="dp-category-search-line">
{innerSelectedTags.value.map((item) => (
<CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
))}
<CategorySearchInput ref={inputRef} />
</ul>
</div>
{showExtendedConfig.value && (
<div class="dp-category-search-extended-container">
{operationConfig.clear?.show && (
<>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
)}
{operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
{operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
{ctx.slots.operation?.()}
</div>
)}
</div>
);
},
return () => (
<div
ref={rootRef}
class={containerClasses.value}
onMouseenter={() => (isHover.value = true)}
onMouseleave={() => (isHover.value = false)}>
{ctx.slots.searchIcon?.() ?? (
<div class="dp-category-search-icon" onClick={onSearch}>
<SearchIcon />
</div>
)}
<div ref={scrollBarRef} class="dp-category-search-line-container">
<ul class="dp-category-search-line">
{innerSelectedTags.value.map((item) => (
<CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
))}
<CategorySearchInput ref={inputRef} />
</ul>
</div>
{showExtendedConfig.value && (
<div class="dp-category-search-extended-container">
{operationConfig.clear?.show && (
<>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
)}
{operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
{operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
{ctx.slots.operation?.()}
</div>
)}
</div>
);
},
});
1 change: 0 additions & 1 deletion packages/devui-vue/devui/checkbox/src/checkbox-types.ts
Original file line number Diff line number Diff line change
@@ -37,7 +37,6 @@ const commonProps = {
},
size: {
type: String as PropType<Size>,
default: 'md',
},
showGlowStyle: {
type: Boolean,
2 changes: 1 addition & 1 deletion packages/devui-vue/devui/checkbox/src/use-checkbox.ts
Original file line number Diff line number Diff line change
@@ -143,7 +143,7 @@ export function useCheckboxGroup(props: CheckboxGroupProps, ctx: SetupContext):
);

// 组件 size 优先于表单 size
const checkboxGroupSize = computed(() => props.size || formContext?.size || '');
const checkboxGroupSize = computed(() => props.size || formContext?.size || 'md');

provide(checkboxGroupInjectionKey, {
disabled: toRef(props, 'disabled'),
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ export default defineComponent({
setup(props: RangeDatePickerProProps, ctx: SetupContext) {
const app = getCurrentInstance();
const t = createI18nTranslate('DDatePickerPro', app);
const { showGlowStyle } = toRefs(props);
const { showGlowStyle, position } = toRefs(props);

const ns = useNamespace('range-date-picker-pro');
const {
@@ -44,7 +44,6 @@ export default defineComponent({
handlerClearTime,
onChangeRangeFocusType,
} = useRangePickerPro(props, ctx);
const position = ref(['bottom-start', 'top-start']);
const currentPosition = ref('bottom');
const handlePositionChange = (pos: string) => {
currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
@@ -53,6 +52,15 @@ export default defineComponent({
transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
'z-index': 'var(--devui-z-index-dropdown, 1052)',
}));
const align = computed(() => {
if (position.value.some((item: string) => item.includes('start'))) {
return 'start';
}
if (position.value.some((item: string) => item.includes('end'))) {
return 'end';
}
return undefined;
});

return () => {
const vSlots = {
@@ -141,7 +149,7 @@ export default defineComponent({
v-model={isPanelShow.value}
ref={overlayRef}
origin={originRef.value}
align="start"
align={align.value}
position={position.value}
style={styles.value}
onPositionChange={handlePositionChange}>
Original file line number Diff line number Diff line change
@@ -3,6 +3,20 @@ import type { Dayjs } from 'dayjs';
import { ArrType } from '../../time-picker/src/types';
import type { InputSize } from '../../input/src/input-types';

export type Placement =
| 'top'
| 'right'
| 'bottom'
| 'left'
| 'top-start'
| 'top-end'
| 'right-start'
| 'right-end'
| 'bottom-start'
| 'bottom-end'
| 'left-start'
| 'left-end';

export const datePickerProCommonProps = {
format: {
type: String,
@@ -34,6 +48,10 @@ export const datePickerProCommonProps = {
type: Boolean,
default: true,
},
position: {
type: Array as PropType<Placement[]>,
default: () => ['bottom-start', 'top-start'],
},
};

export const datePickerProProps = {
16 changes: 12 additions & 4 deletions packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import type { SetupContext } from 'vue';
import { datePickerProProps, DatePickerProProps } from './date-picker-pro-types';
import usePickerPro from './use-picker-pro';
import { Input } from '../../input';
import { FlexibleOverlay, Placement } from '../../overlay';
import { FlexibleOverlay } from '../../overlay';
import DatePickerProPanel from './components/date-picker-panel';
import { IconCalendar } from './components/icon-calendar';
import { IconClose } from './components/icon-close';
@@ -18,7 +18,7 @@ export default defineComponent({
setup(props: DatePickerProProps, ctx: SetupContext) {
const app = getCurrentInstance();
const t = createI18nTranslate('DDatePickerPro', app);
const { showGlowStyle } = toRefs(props);
const { showGlowStyle, position } = toRefs(props);

const ns = useNamespace('date-picker-pro');
const {
@@ -39,7 +39,6 @@ export default defineComponent({
onSelectedDate,
handlerClearTime,
} = usePickerPro(props, ctx, t);
const position = ref<Placement[]>(['bottom-start', 'top-start']);
const currentPosition = ref('bottom');
const handlePositionChange = (pos: string) => {
currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
@@ -48,6 +47,15 @@ export default defineComponent({
transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
'z-index': 'var(--devui-z-index-dropdown, 1052)',
}));
const align = computed(() => {
if (position.value.some((item: string) => item.includes('start'))) {
return 'start';
}
if (position.value.some((item: string) => item.includes('end'))) {
return 'end';
}
return undefined;
});

return () => {
const vSlots = {
@@ -90,7 +98,7 @@ export default defineComponent({
v-model={isPanelShow.value}
ref={overlayRef}
origin={originRef.value}
align="start"
align={align.value}
position={position.value}
style={styles.value}
onPositionChange={handlePositionChange}>
36 changes: 15 additions & 21 deletions packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
import { randomId } from '../../../../shared/utils/random-id';
import type { ComponentInternalInstance, Ref } from 'vue';
import {
defineComponent,
getCurrentInstance,
inject,
onMounted,
ref,
watch,
watchEffect
} from 'vue';
import { defineComponent, getCurrentInstance, inject, onMounted, ref, watch, watchEffect } from 'vue';
import { useNamespace } from '../../../../shared/hooks/use-namespace';
import { useClick } from '../../composables/use-click';
import { addLayer, clearSelect, getLayer, pushElement } from '../../composables/use-layer-operate';
import { useNearestMenuElement } from '../../composables/use-nearest-menu-element';
import MenuTransition from '../menu-transition/menu-transition';
import { SubMenuProps, subMenuProps } from './sub-menu-types';
import { useShowSubMenu } from './use-sub-menu';
import { SelectArrowIcon } from '../../../../svg-icons';

const ns = useNamespace('menu');
const subNs = useNamespace('submenu');
@@ -31,7 +24,7 @@ export default defineComponent({
setup(props: SubMenuProps, ctx) {
const isShow = ref(true);
const {
vnode: { key }
vnode: { key },
} = getCurrentInstance() as ComponentInternalInstance;
let key_ = String(key);
const defaultOpenKeys = inject('openKeys') as Ref<string[]>;
@@ -63,7 +56,7 @@ export default defineComponent({
if (idx >= 0 && cur.tagName === 'UL') {
defaultOpenKeys.value.splice(idx, 1);
} else {
if (cur.tagName === 'UL'){
if (cur.tagName === 'UL') {
defaultOpenKeys.value.push(key_);
}
}
@@ -72,7 +65,7 @@ export default defineComponent({
type: 'submenu-change',
state: isOpen.value,
key: key_,
el: ele
el: ele,
});
}
};
@@ -93,12 +86,13 @@ export default defineComponent({
watch(
() => defaultOpenKeys,
(n) => {
if (n.value.includes(key_)){
if (n.value.includes(key_)) {
isOpen.value = true;
} else {
isOpen.value = false;
}
},{deep: true}
},
{ deep: true }
);
onMounted(() => {
const subMenuTitle = title.value as unknown as HTMLElement;
@@ -142,18 +136,19 @@ export default defineComponent({
onClick={clickHandle}
class={[subMenuClass, class_layer.value, props['disabled'] && `${subMenuClass}-disabled`]}
ref={subMenu}>
<div
class={[`${subMenuClass}-title`]}
style={`padding: 0 ${indent}px`}
ref={title}>
<div class={[`${subMenuClass}-title`]} style={`padding: 0 ${indent}px`} ref={title}>
<span class={`${ns.b()}-icon`}>{ctx.slots?.icon?.()}</span>
<span v-show={!isCollapsed.value} class={`${subMenuClass}-title-content`}>
{props.title}
</span>
<SelectArrowIcon
v-show={!isCollapsed.value && key !== 'overflowContainer' && class_layer.value !== `layer_${subMenuClass}`}
class={[ns.e('arrow-icon'), { 'is-opened': isOpen.value }]}
/>
<i
v-show={!isCollapsed.value && key !== 'overflowContainer'}
class={{
'icon icon-chevron-up': class_layer.value !== `layer_${subMenuClass}`,
'icon icon-chevron-up': false,
'icon icon-chevron-right': class_layer.value === `layer_${subMenuClass}`,
'is-opened': isOpen.value,
}}></i>
@@ -162,8 +157,7 @@ export default defineComponent({
<div
class={`${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`}
ref={wrapper}
v-show={!props.disabled}
>
v-show={!props.disabled}>
{ctx.slots.default?.()}
</div>
) : (
19 changes: 16 additions & 3 deletions packages/devui-vue/devui/menu/src/styles/vertical.scss
Original file line number Diff line number Diff line change
@@ -6,8 +6,7 @@
}
.#{$devui-prefix}-menu-vertical {
padding: 0;
transition:
width $devui-animation-duration-slow $devui-animation-ease-in-smooth,
transition: width $devui-animation-duration-slow $devui-animation-ease-in-smooth,
padding $devui-animation-duration-slow $devui-animation-ease-in-smooth;
border-right: $devui-line 1px solid;

@@ -48,6 +47,7 @@

.#{$devui-prefix}-menu-item-vertical-wrapper {
padding-left: 0 !important;
margin: 4px 0 !important;
}

.#{$devui-prefix}-menu-item {
@@ -108,7 +108,6 @@
cursor: pointer;
width: 100%;
height: 40px;
margin: 4px 0;
line-height: 40px;
padding-left: 18px;
align-items: center;
@@ -227,4 +226,18 @@
.#{$devui-prefix}-submenu-disabled::after {
content: unset;
}

.#{$devui-prefix}-menu__arrow-icon {
width: 16px;
height: 16px;
transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;

path {
fill: $devui-text-weak;
}

&.is-opened {
transform: rotate(180deg);
}
}
}
Original file line number Diff line number Diff line change
@@ -391,6 +391,7 @@ export default defineComponent({
| save | 自定义保存图标 | | |
| more | 自定义更多图标 | | |
| operation | 自定义除`clear``save``more`外的其他图标 | | [自定义扩展按钮](#自定义扩展按钮) |
| searchIcon | 自定义搜索图标 | | |

### CategorySearch 方法

Loading

0 comments on commit f154140

Please sign in to comment.