-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refact(kt-comment): refact CommentInlineEdit.vue and KtCommentInput.vue
- Add isInternal and allowInternal flags - Refact comment docs
- Loading branch information
1 parent
4c4956a
commit d2fc284
Showing
16 changed files
with
663 additions
and
374 deletions.
There are no files selected for viewing
356 changes: 209 additions & 147 deletions
356
packages/documentation/pages/usage/components/comment.vue
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
154 changes: 44 additions & 110 deletions
154
packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,140 +1,74 @@ | ||
| <template> | ||
| <div :class="containerClass"> | ||
| <div :class="wrapperClass"> | ||
| <KtAvatar | ||
| v-if="!isInline" | ||
| class="kt-comment-input__avatar" | ||
| size="sm" | ||
| :src="userAvatar" | ||
| /> | ||
| <textarea | ||
| ref="textarea" | ||
| v-model="text" | ||
| class="kt-comment-input__textarea" | ||
| :placeholder="placeholder" | ||
| @blur="textFocused = false" | ||
| @focus="textFocused = true" | ||
| @input="updateHeight" | ||
| /> | ||
| <KtButton | ||
| :disabled="!text" | ||
| :label="replyButtonText" | ||
| type="text" | ||
| @click="handleSubmitClick" | ||
| /> | ||
| </div> | ||
| <div class="kt-comment-input"> | ||
| <KtAvatar size="sm" :src="userAvatar" /> | ||
| <CommentTextArea | ||
| v-model="_message" | ||
| v-bind="{ allowInternal, autofocus, isReply, placeholder, tabIndex }" | ||
| :isInternal="_isInternal" | ||
| @cancel="onCancel" | ||
| @confirm="onConfirm" | ||
| @toggleInternal="onToggleInternal" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { computed, defineComponent, ref } from '@vue/composition-api' | ||
| import { defineComponent, ref, watch } from '@vue/composition-api' | ||
| import { KtAvatar } from '../kotti-avatar' | ||
| import { KtButton } from '../kotti-button' | ||
| import { useTranslationNamespace } from '../kotti-i18n/hooks' | ||
| import { makeProps } from '../make-props' | ||
| import { KottiCommentInput } from './types' | ||
| import CommentTextArea from './components/CommentTextArea.vue' | ||
| import { KottiComment, KottiCommentInput } from './types' | ||
| export default defineComponent<KottiCommentInput.PropsInternal>({ | ||
| name: 'KtCommentInput', | ||
| components: { | ||
| KtAvatar, | ||
| KtButton, | ||
| CommentTextArea, | ||
| }, | ||
| props: makeProps(KottiCommentInput.propsSchema), | ||
| setup(props, { emit }) { | ||
| const translations = useTranslationNamespace('KtComment') | ||
| const _isInternal = ref<KottiComment.PropsInternal['isInternal']>( | ||
| props.isInternal, | ||
| ) | ||
| const _message = ref<KottiComment.PropsInternal['message']>('') | ||
| watch( | ||
| () => props.isInternal, | ||
| (isInternal) => (_isInternal.value = isInternal), | ||
| ) | ||
| const text = ref<string | null>(null) | ||
| const textarea = ref<HTMLElement | null>(null) | ||
| const textFocused = ref(false) | ||
| return { | ||
| containerClass: computed(() => ({ | ||
| 'kt-comment-input': true, | ||
| 'kt-comment-input--inline': props.isInline, | ||
| })), | ||
| handleSubmitClick: () => { | ||
| if (text.value === null) return | ||
| emit('add', { | ||
| message: text.value, | ||
| _isInternal, | ||
| _message, | ||
| onCancel: () => { | ||
| _isInternal.value = props.isInternal | ||
| _message.value = '' | ||
| emit('cancel') | ||
| }, | ||
| onConfirm: () => { | ||
| if (_message.value === '') return | ||
| const payload: KottiComment.Events.Add = { | ||
| isInternal: _isInternal.value, | ||
| message: _message.value, | ||
| replyToUserId: props.replyToUserId, | ||
| parentId: props.parentId, | ||
| }) | ||
| text.value = null | ||
| if (textarea.value) textarea.value.style.height = '1.2rem' | ||
| }, | ||
| replyButtonText: computed(() => | ||
| props.isInline | ||
| ? translations.value.replyButton | ||
| : translations.value.postButton, | ||
| ), | ||
| text, | ||
| textarea, | ||
| textFocused, | ||
| updateHeight: () => { | ||
| if (textarea.value === null) return '1.2rem' | ||
| const height = textarea.value.scrollHeight | ||
| textarea.value.style.height = `${height}px` | ||
| } | ||
| emit('add', payload) | ||
| _isInternal.value = props.isInternal | ||
| _message.value = '' | ||
| }, | ||
| wrapperClass: computed(() => ({ | ||
| 'kt-comment-input__wrapper': true, | ||
| 'kt-comment-input__wrapper--focus': textFocused.value, | ||
| 'kt-comment-input__wrapper--inline': props.isInline, | ||
| })), | ||
| onToggleInternal: () => (_isInternal.value = !_isInternal.value), | ||
| } | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .kt-comment-input { | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| &--inline { | ||
| margin: 0 0 var(--unit-1) 0; | ||
| } | ||
| &__wrapper { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| width: 100%; | ||
| padding: var(--unit-2); | ||
| background-color: var(--white); | ||
| border: 1px solid #dbdbdb; | ||
| border-radius: var(--border-radius); | ||
| &--focus { | ||
| border: 1px solid #bbb; | ||
| } | ||
| &--inline { | ||
| padding: var(--unit-1); | ||
| } | ||
| } | ||
| &__avatar { | ||
| margin-right: var(--unit-1); | ||
| } | ||
| &__textarea { | ||
| flex: 1 1; | ||
| width: 100%; | ||
| height: 1.2rem; | ||
| padding: 0; | ||
| margin: 0 0.2rem; | ||
| resize: none; | ||
| border: 0; | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| } | ||
| .kt-button { | ||
| cursor: pointer; | ||
| } | ||
| column-gap: var(--unit-2); | ||
| } | ||
| </style> |
5 changes: 4 additions & 1 deletion
5
packages/kotti-ui/source/kotti-comment/components/CommentActions.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.