diff --git a/frontend/src/directives/index.ts b/frontend/src/directives/index.ts new file mode 100644 index 000000000..3720e7e3e --- /dev/null +++ b/frontend/src/directives/index.ts @@ -0,0 +1,16 @@ +import { App, Directive } from 'vue'; +import integerInput from './modules/integer'; + +const directivesList: { [key: string]: Directive } = { + 'integer-input': integerInput, +}; + +const directives = { + install: function (app: App) { + Object.keys(directivesList).forEach((key) => { + app.directive(key, directivesList[key]); + }); + }, +}; + +export default directives; diff --git a/frontend/src/directives/modules/integer.ts b/frontend/src/directives/modules/integer.ts new file mode 100644 index 000000000..d90b077e7 --- /dev/null +++ b/frontend/src/directives/modules/integer.ts @@ -0,0 +1,23 @@ +import type { Directive, DirectiveBinding } from 'vue'; + +const integerInput: Directive = { + mounted(el: HTMLElement, binding: DirectiveBinding) { + const { value } = binding; + el.addEventListener('input', (event: Event) => { + const inputElement = event.target as HTMLInputElement; + let inputValue = inputElement.value; + inputValue = inputValue.replace(/\..*/, ''); + if (value?.min !== undefined && Number(inputValue) < value.min) { + inputValue = value.min.toString(); + } + if (value?.max !== undefined && Number(inputValue) > value.max) { + inputValue = value.max.toString(); + } + inputElement.value = inputValue; + const inputEvent = new Event('input', { bubbles: true }); + inputElement.dispatchEvent(inputEvent); + }); + }, +}; + +export default integerInput; diff --git a/frontend/src/main.ts b/frontend/src/main.ts index ee6670f4a..d078d6714 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -28,6 +28,8 @@ import hljsVuePlugin from '@highlightjs/vue-plugin'; import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; import VirtualScroller from 'vue-virtual-scroller'; +import directives from '@/directives/index'; + const app = createApp(App); app.use(hljsVuePlugin); app.component('SvgIcon', SvgIcon); @@ -43,4 +45,6 @@ app.use(router); app.use(i18n); app.use(pinia); app.use(Components); +app.use(directives); + app.mount('#app'); diff --git a/frontend/src/views/host/file-management/process/index.vue b/frontend/src/views/host/file-management/process/index.vue index b5a4063e1..1e19dcc82 100644 --- a/frontend/src/views/host/file-management/process/index.vue +++ b/frontend/src/views/host/file-management/process/index.vue @@ -24,7 +24,7 @@