From bd976f4075be17f2238f79dab19f2193b3893f91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Mon, 25 Mar 2024 18:45:04 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(EditorMd):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=9C=80=E8=A6=81=E4=B8=80=E4=B8=AA=E7=A9=BA=E6=A0=BC=E6=89=8D?= =?UTF-8?q?=E8=83=BD=E8=89=BE=E7=89=B9=E7=9A=84=E9=97=AE=E9=A2=98=20(#1797?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/editor-md/src/composables/use-editor-md.ts | 1 - packages/devui-vue/package.json | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts index 28af3d30a7..99cb38482d 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts @@ -215,7 +215,6 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { const endPos = value.indexOf(' ', cursor.ch) > -1 ? value.indexOf(' ', cursor.ch) : value.length; hint = value.slice(startPos, cursor.ch); if ( - (startPos > 0 && value[startPos - 1] !== ' ') || startPos < 0 || !hint.includes(nowPrefix) || hint.endsWith(' ') || diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 1cbec3fd4e..87321f07a1 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.3-editable-select.1", + "version": "1.6.3-markdown.3", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [ @@ -124,4 +124,4 @@ "vitepress-theme-demoblock": "1.3.2", "vue-tsc": "0.38.8" } -} +} \ No newline at end of file From c5310a893064372f5a76f1b0453f2e3dceda4eac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Mon, 25 Mar 2024 20:06:16 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(Select):=20=E6=B7=BB=E5=8A=A0=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=20(#1799)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/select/src/select.scss | 63 ++++++++++++++----- .../devui-vue/devui/select/src/select.tsx | 21 +++++-- 2 files changed, 64 insertions(+), 20 deletions(-) diff --git a/packages/devui-vue/devui/select/src/select.scss b/packages/devui-vue/devui/select/src/select.scss index e849c8a675..72393681e1 100644 --- a/packages/devui-vue/devui/select/src/select.scss +++ b/packages/devui-vue/devui/select/src/select.scss @@ -39,6 +39,7 @@ $select-item-min-height: 36px; .#{$devui-prefix}-tag { margin: 4px 0 4px 4px; + .#{$devui-prefix}-tag__item.#{$devui-prefix}-tag--md { height: 18px; line-height: 16px; @@ -51,6 +52,7 @@ $select-item-min-height: 36px; &--sm { font-size: $devui-font-size-sm; + .#{$devui-prefix}-tag { margin: 2px 0 2px 4px; @@ -151,6 +153,7 @@ $select-item-min-height: 36px; flex-wrap: wrap; padding-right: 28px; cursor: pointer; + .#{$devui-prefix}-select__multiple--input { display: flex; max-width: 100%; @@ -330,20 +333,6 @@ $select-item-min-height: 36px; } } -.fade-enter-active, -.fade-leave-active { - transform: scale3d(0, 1, 0, 0.9999) translate3d(0, 1, 0, 0); - transform-origin: 0 0%; - opacity: 1; - transition: transform, opacity $transition-base-time ease-out; -} - -.fade-enter-from, -.fade-leave-to { - transform: scale3d(0, 1, 0, 0) translate3d(0, 1, 0, -4px); - opacity: 0; - transition: transform, opacity $transition-base-time ease-in; -} .#{$devui-prefix}-select__dropdown--empty { text-align: center; font-size: $select-item-font-size; @@ -377,3 +366,49 @@ $select-item-min-height: 36px; color: $devui-aide-text; } } + +.fade { + &-bottom { + &-enter-from, + &-leave-to { + opacity: 0.8; + transform: scaleY(0.8) translateY(-4px); + } + + &-enter-to, + &-leave-from { + opacity: 1; + transform: scaleY(0.9999) translateY(0); + } + + &-enter-active { + transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1); + } + + &-leave-active { + transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25); + } + } + + &-top { + &-enter-from, + &-leave-to { + opacity: 0.8; + transform: scaleY(0.8) translateY(4px); + } + + &-enter-to, + &-leave-from { + opacity: 1; + transform: scaleY(0.9999) translateY(0); + } + + &-enter-active { + transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1); + } + + &-leave-active { + transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25); + } + } +} diff --git a/packages/devui-vue/devui/select/src/select.tsx b/packages/devui-vue/devui/select/src/select.tsx index 28e650d2ff..13e17d9496 100644 --- a/packages/devui-vue/devui/select/src/select.tsx +++ b/packages/devui-vue/devui/select/src/select.tsx @@ -12,6 +12,7 @@ import { withModifiers, onUnmounted, nextTick, + computed } from 'vue'; import type { SetupContext } from 'vue'; import useSelect from './use-select'; @@ -72,9 +73,18 @@ export default defineComponent({ const dropdownEmptyCls = ns.em('dropdown', 'empty'); ctx.expose({ focus, blur, toggleChange }); const isRender = ref(false); + const currentPosition = ref('bottom'); const position = ref(['bottom-start', 'top-start']); const dropdownWidth = ref('0'); + const handlePositionChange = (pos: string) => { + currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom'; + }; + const styles = computed(() => ({ + transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%', + 'z-index': 'var(--devui-z-index-dropdown, 1052)' + })); + const updateDropdownWidth = () => { dropdownWidth.value = originRef?.value?.clientWidth ? originRef.value.clientWidth + 'px' : '100%'; }; @@ -134,19 +144,18 @@ export default defineComponent({ }, ['stop'])}> - + -
+ onPositionChange={handlePositionChange} + style={styles.value}> +
    {isShowCreateOption.value && (