diff --git a/apps/web/src/common/components/buttons/ActionMenuButton.vue b/apps/web/src/common/components/buttons/ActionMenuButton.vue index 7acab1a378..6b4b532b3c 100644 --- a/apps/web/src/common/components/buttons/ActionMenuButton.vue +++ b/apps/web/src/common/components/buttons/ActionMenuButton.vue @@ -5,6 +5,8 @@ import { ref, computed } from 'vue'; import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae'; import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; +import { i18n } from '@/translations'; + interface ActionMenuItem extends MenuItem { name: string; } @@ -37,8 +39,8 @@ useContextMenuStyle({ menuWidth: props.size === 'sm' ? '113px' : '192px', }); const menuMap = computed>(() => ({ - edit: { name: 'edit', icon: 'ic_edit', label: 'Edit' }, - delete: { name: 'delete', icon: 'ic_delete', label: 'Delete' }, + edit: { name: 'edit', icon: 'ic_edit', label: i18n.t('COMMON.BUTTONS.EDIT') }, + delete: { name: 'delete', icon: 'ic_delete', label: i18n.t('COMMON.BUTTONS.DELETE') }, })); const menu = computed(() => { if (props.menu) { @@ -50,8 +52,8 @@ const menu = computed(() => { }); } return [ - { name: 'edit', icon: 'ic_edit', label: 'Edit' }, - { name: 'delete', icon: 'ic_delete', label: 'Delete' }, + { name: 'edit', icon: 'ic_edit', label: i18n.t('COMMON.BUTTONS.EDIT') }, + { name: 'delete', icon: 'ic_delete', label: i18n.t('COMMON.BUTTONS.DELETE') }, ]; }); const toggleMenu = () => { diff --git a/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts b/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts index 797b041b4b..7eafbeee0f 100644 --- a/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts +++ b/apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts @@ -94,8 +94,8 @@ export const dropImagePlugin = (upload: ImageUploader, imgFileDataMap: Map< src: downloadUrl, 'file-id': fileId, }); - // const transaction = view.state.tr.insert(coordinates.pos, node); - const transaction = view.state.tr.setNodeMarkup(coordinates.pos, schema.nodes.image, node.attrs); + const loadingPos = view.state.selection.anchor - 1; // get the position of the loading node + const transaction = view.state.tr.setNodeMarkup(loadingPos, schema.nodes.image, node.attrs); view.dispatch(transaction); } else { reader.onload = (readerEvent) => { diff --git a/apps/web/src/common/modules/user/UserSelectDropdown.vue b/apps/web/src/common/modules/user/UserSelectDropdown.vue index 8ef8cf9179..adea15bd46 100644 --- a/apps/web/src/common/modules/user/UserSelectDropdown.vue +++ b/apps/web/src/common/modules/user/UserSelectDropdown.vue @@ -49,13 +49,13 @@ const allUserItems = computed(() => { if (props.userPool && props.userPool.length > 0) { return props.userPool.map((userId) => ({ name: userId, - label: userReferenceMap.value[userId]?.label ?? userId, + label: userReferenceMap.value[userId]?.label || userReferenceMap.value[userId]?.name || userId, })); } return Object.values(userReferenceMap.value).map((u: UserReferenceMap[string]) => ({ name: u.key, - label: u.label, - })); + label: u.label || u.name || u.key, + })).sort((a, b) => a.label.localeCompare(b.label)); }); const selectedUserItems = ref([]); const userMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => { @@ -125,6 +125,7 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId, + + CONFIRM + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DELETE + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + DONE false @@ -12935,6 +12977,27 @@ + + EDIT + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + PDF_DOWNLOAD_BUTTON @@ -76074,6 +76137,666 @@ + + OPSFLOW + + + ADD_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + ALT_E_ADD_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + ALT_E_DELETE_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + ALT_E_EDIT_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + ALT_S_ADD_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + ALT_S_DELETE_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + ALT_S_EDIT_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + ASSIGNEE_POOL + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DEFAULT + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DELETE_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DELETE_TARGET_CONFIRMATION + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DELETE_TARGET_CONFIRMATION2 + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DESCRIPTION + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + EDIT_TARGET + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + FIELDS_CONFIG + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + FIELD_DESCRIPTION + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + NAME + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + SET_AS_DEFAULT + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + STATUS + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + STATUS_COMPLETED + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + STATUS_IN_PROGRESS + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + STATUS_TODO + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + TASK_BOARD + + + TASK_PROGRESS + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + + + TASK_MANAGEMENT + + + STATUS + + + DELETE_CONTINUE + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DESC + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + + + TASK_TYPE + + + DELETE_UNAVAILABLE + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + DESC + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + + + + + VALIDATION + + + DUPLICATED + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + LENGTH_MAX + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + REQUIRED + false + + + + + + en-US + false + + + ja-JP + false + + + ko-KR + false + + + + + + + PAGE_SCHEMA diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json index 926228809c..a404de9aa6 100644 --- a/packages/language-pack/en.json +++ b/packages/language-pack/en.json @@ -702,8 +702,11 @@ "BUTTONS": { "ADD": "Add", "CANCEL": "Cancel", + "CONFIRM": "Confirm", + "DELETE": "Delete", "DONE": "Done", "DOWNLOAD": "Download", + "EDIT": "Edit", "PDF_DOWNLOAD_BUTTON": { "DESKTOP": "desktop", "SUPPORT_PDF_HELP_TEXT": "This feature is not supported on your browser or device. Try again with {chrome} or {edge} browser on {desktop}." diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json index 4569dd4acb..34171b13cb 100644 --- a/packages/language-pack/ja.json +++ b/packages/language-pack/ja.json @@ -702,8 +702,11 @@ "BUTTONS": { "ADD": "追加", "CANCEL": "キャンセル", + "CONFIRM": "", + "DELETE": "", "DONE": "完了", "DOWNLOAD": "ダウンロード", + "EDIT": "", "PDF_DOWNLOAD_BUTTON": { "DESKTOP": "デスクトップ", "SUPPORT_PDF_HELP_TEXT": "この機能は、ご使用のブラウザまたはデバイスではサポートされていません。 {desktop}で{chrome}または{edge}ブラウザを使用して再試行してください。" diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json index 5bfdee9b21..0ef031e42f 100644 --- a/packages/language-pack/ko.json +++ b/packages/language-pack/ko.json @@ -702,8 +702,11 @@ "BUTTONS": { "ADD": "추가", "CANCEL": "취소", + "CONFIRM": "확인", + "DELETE": "삭제", "DONE": "완료", "DOWNLOAD": "다운로드", + "EDIT": "수정", "PDF_DOWNLOAD_BUTTON": { "DESKTOP": "데스크탑", "SUPPORT_PDF_HELP_TEXT": "해당 기능을 지원하지 않는 브라우저 또는 디바이스입니다. {desktop} 환경의 {chrome} 또는 {edge} 브라우저에서 이용해주세요." diff --git a/packages/mirinae/src/controls/context-menu/PContextMenu.vue b/packages/mirinae/src/controls/context-menu/PContextMenu.vue index b291b977bd..b89df01438 100644 --- a/packages/mirinae/src/controls/context-menu/PContextMenu.vue +++ b/packages/mirinae/src/controls/context-menu/PContextMenu.vue @@ -143,8 +143,9 @@ const onClickMenu = (item: MenuItem, index) => { if (props.multiSelectable) { if (state.selectedNameMap[item.name ?? ''] !== undefined) { const indexOfSelected = state.selectedNameMap[item.name ?? '']; - state.proxySelected.splice(indexOfSelected, 1); - state.proxySelected = [...state.proxySelected]; + const newSelected = [...state.proxySelected]; + newSelected.splice(indexOfSelected, 1); + state.proxySelected = newSelected; } else { state.proxySelected = [...state.proxySelected, item]; } @@ -274,8 +275,8 @@ defineExpose({ :ellipsis="props.itemHeightFixed" :highlight-term="state.proxySearchText || props.highlightTerm" :tabindex="readonly ? -1 : index" - @click.stop.prevent="readonly ? undefined : onClickMenu(item, index, $event)" - @keyup.enter="readonly ? undefined : onClickMenu(item, index, $event)" + @click.stop.prevent="onClickMenu(item, index, $event)" + @keyup.enter="onClickMenu(item, index, $event)" @keydown.up="onKeyUp(index)" @keydown.down="onKeyDown(index)" > diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx index d6b9c4b9f2..b41b70aa53 100644 --- a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx +++ b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.mdx @@ -12,6 +12,17 @@ import * as PButtonModalStories from './PButtonModal.stories';

+## Basic + + +
+
+ +## Loading Backdrop + + +
+
## Playground diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts index cfbc69028a..e6e49e0da2 100644 --- a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts +++ b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.stories.ts @@ -8,6 +8,7 @@ import type { ComponentProps } from 'vue-component-type-helpers'; import PButton from '@/controls/buttons/button/PButton.vue'; import PSelectDropdown from '@/controls/dropdown/select-dropdown/PSelectDropdown.vue'; +import { getMenuItems } from '@/feedbacks/modals/button-modal/mock'; import PButtonModal from '@/feedbacks/modals/button-modal/PButtonModal.vue'; import { getButtonModalArgs, getButtonModalArgTypes, getButtonModalParameters } from '@/feedbacks/modals/button-modal/story-helper'; @@ -54,6 +55,7 @@ const Template: Story = { :hide-footer-confirm-button="hideFooterConfirmButton" :footer-reset-button-visible="footerResetButtonVisible" :loading="loading" + :loading-backdrop="loadingBackdrop" :disabled="disabled" :absolute="absolute" :modal-body-id="modalBodyId" @@ -75,62 +77,7 @@ const Template: Story = { const state = reactive({ modalVisible: props.visible, contents: computed(() => faker.lorem.lines(props.contentsHeight)), - menu: [ - { - type: 'item', label: 'Add', name: 'add', disabled: false, - }, - { - type: 'item', label: 'Hello', name: 'hello', disabled: false, - }, - { type: 'divider' }, - { type: 'header', label: 'this is header' }, - { - type: 'item', label: 'Update', name: 'update', disabled: false, - }, - { - type: 'item', label: 'Delete', name: 'delete', disabled: false, - }, - { type: 'divider' }, - { - type: 'item', label: 'Collect', name: 'collect', disabled: false, - }, - { type: 'divider' }, - { - type: 'item', label: 'Remove', name: 'remove', disabled: true, - }, - ], - items: [ - { type: 'item', label: 'one', name: 'one' }, - { type: 'item', label: 'two', name: 'two' }, - { type: 'item', label: 'three', name: 'three' }, - { type: 'item', label: 'four', name: 'four' }, - { type: 'item', label: 'five', name: 'five' }, - { type: 'item', label: 'six', name: 'six' }, - { type: 'item', label: 'one', name: 'one' }, - { type: 'item', label: 'two', name: 'two' }, - { type: 'item', label: 'three', name: 'three' }, - { type: 'item', label: 'four', name: 'four' }, - { type: 'item', label: 'five', name: 'five' }, - { type: 'item', label: 'six', name: 'six' }, - { type: 'item', label: 'one', name: 'one' }, - { type: 'item', label: 'two', name: 'two' }, - { type: 'item', label: 'three', name: 'three' }, - { type: 'item', label: 'four', name: 'four' }, - { type: 'item', label: 'five', name: 'five' }, - { type: 'item', label: 'six', name: 'six' }, - { type: 'item', label: 'one', name: 'one' }, - { type: 'item', label: 'two', name: 'two' }, - { type: 'item', label: 'three', name: 'three' }, - { type: 'item', label: 'four', name: 'four' }, - { type: 'item', label: 'five', name: 'five' }, - { type: 'item', label: 'six', name: 'six' }, - { type: 'item', label: 'one', name: 'one' }, - { type: 'item', label: 'two', name: 'two' }, - { type: 'item', label: 'three', name: 'three' }, - { type: 'item', label: 'four', name: 'four' }, - { type: 'item', label: 'five', name: 'five' }, - { type: 'item', label: 'six', name: 'six' }, - ], + items: getMenuItems(), }); const launchModal = () => { state.modalVisible = true; @@ -148,6 +95,80 @@ const Template: Story = { }), }; + +export const Basic: Story = { + render: () => ({ + components: { PButtonModal, PButton }, + template: ` +
+ Launch a modal + + + +
+ `, + setup() { + const state = reactive({ + modalVisible: false, + contents: computed(() => faker.lorem.lines(5)), + }); + const handleConfirm = () => { + state.modalVisible = false; + }; + return { + ...toRefs(state), + handleConfirm, + }; + }, + }), +}; + +export const LoadingBackdrop: Story = { + render: () => ({ + components: { PButtonModal, PButton }, + template: ` +
+ Launch a modal + + + +
+ `, + setup() { + const state = reactive({ + modalVisible: false, + contents: computed(() => faker.lorem.lines(5)), + loadingBackdrop: true, + }); + + const launchModal = () => { + state.loadingBackdrop = true; + state.modalVisible = true; + setTimeout(() => { + state.loadingBackdrop = false; + }, 3000); + }; + const handleConfirm = () => { + state.modalVisible = false; + }; + return { + ...toRefs(state), + launchModal, + handleConfirm, + }; + }, + }), +}; + export const Playground: Story = { ...Template, }; diff --git a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue index 30121132e3..9143975cf4 100644 --- a/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue +++ b/packages/mirinae/src/feedbacks/modals/button-modal/PButtonModal.vue @@ -5,10 +5,18 @@ @after-leave="onModalLeave" >
-
+