summaryrefslogtreecommitdiff
path: root/src/client/components/ui/input.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/ui/input.vue')
-rw-r--r--src/client/components/ui/input.vue262
1 files changed, 117 insertions, 145 deletions
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index f9c2d9a43a..dec4a08712 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -2,66 +2,51 @@
<div class="juejbjww" :class="{ focused, filled, inline, disabled }">
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<div class="input">
- <span class="label" ref="label"><slot></slot></span>
+ <span class="label" ref="labelEl"><slot></slot></span>
<span class="title" ref="title">
<slot name="title"></slot>
- <span class="warning" v-if="invalid"><fa :icon="faExclamationCircle"/>{{ $refs.input.validationMessage }}</span>
+ <span class="warning" v-if="invalid"><Fa :icon="faExclamationCircle"/>{{ $refs.input.validationMessage }}</span>
</span>
- <div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
- <template v-if="type != 'file'">
- <input v-if="debounce" ref="input"
- v-debounce="500"
- :type="type"
- v-model.lazy="v"
- :disabled="disabled"
- :required="required"
- :readonly="readonly"
- :placeholder="placeholder"
- :pattern="pattern"
- :autocomplete="autocomplete"
- :spellcheck="spellcheck"
- :step="step"
- @focus="focused = true"
- @blur="focused = false"
- @keydown="$emit('keydown', $event)"
- @input="onInput"
- :list="id"
- >
- <input v-else ref="input"
- :type="type"
- v-model="v"
- :disabled="disabled"
- :required="required"
- :readonly="readonly"
- :placeholder="placeholder"
- :pattern="pattern"
- :autocomplete="autocomplete"
- :spellcheck="spellcheck"
- :step="step"
- @focus="focused = true"
- @blur="focused = false"
- @keydown="$emit('keydown', $event)"
- @input="onInput"
- :list="id"
- >
- <datalist :id="id" v-if="datalist">
- <option v-for="data in datalist" :value="data"/>
- </datalist>
- </template>
- <template v-else>
- <input ref="input"
- type="text"
- :value="filePlaceholder"
- readonly
- @click="chooseFile"
- >
- <input ref="file"
- type="file"
- :value="value"
- @change="onChangeFile"
- >
- </template>
- <div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
+ <div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+ <input v-if="debounce" ref="inputEl"
+ v-debounce="500"
+ :type="type"
+ v-model.lazy="v"
+ :disabled="disabled"
+ :required="required"
+ :readonly="readonly"
+ :placeholder="placeholder"
+ :pattern="pattern"
+ :autocomplete="autocomplete"
+ :spellcheck="spellcheck"
+ :step="step"
+ @focus="focused = true"
+ @blur="focused = false"
+ @keydown="onKeydown($event)"
+ @input="onInput"
+ :list="id"
+ >
+ <input v-else ref="inputEl"
+ :type="type"
+ v-model="v"
+ :disabled="disabled"
+ :required="required"
+ :readonly="readonly"
+ :placeholder="placeholder"
+ :pattern="pattern"
+ :autocomplete="autocomplete"
+ :spellcheck="spellcheck"
+ :step="step"
+ @focus="focused = true"
+ @blur="focused = false"
+ @keydown="onKeydown($event)"
+ @input="onInput"
+ :list="id"
+ >
+ <datalist :id="id" v-if="datalist">
+ <option v-for="data in datalist" :value="data"/>
+ </datalist>
+ <div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
</div>
<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
<div class="desc _caption"><slot name="desc"></slot></div>
@@ -69,11 +54,12 @@
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import debounce from 'v-debounce';
import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
directives: {
debounce
},
@@ -136,106 +122,92 @@ export default Vue.extend({
required: false,
},
},
- data() {
- return {
- v: this.value,
- focused: false,
- invalid: false,
- changed: false,
- id: Math.random().toString(),
- faExclamationCircle
- };
- },
- computed: {
- filled(): boolean {
- return this.v !== '' && this.v != null;
- },
- filePlaceholder(): string | null {
- if (this.type != 'file') return null;
- if (this.v == null) return null;
+ emits: ['change', 'keydown', 'enter'],
+ setup(props, context) {
+ const { value, type, autofocus } = toRefs(props);
+ const v = ref(value.value);
+ const id = Math.random().toString(); // TODO: uuid?
+ const focused = ref(false);
+ const changed = ref(false);
+ const invalid = ref(false);
+ const filled = computed(() => v.value !== '' && v.value != null);
+ const inputEl = ref(null);
+ const prefixEl = ref(null);
+ const suffixEl = ref(null);
+ const labelEl = ref(null);
- if (typeof this.v == 'string') return this.v;
+ const focus = () => inputEl.value.focus();
+ const onInput = (ev) => {
+ changed.value = true;
+ context.emit('change', ev);
+ };
+ const onKeydown = (ev: KeyboardEvent) => {
+ context.emit('keydown', ev);
- if (Array.isArray(this.v)) {
- return this.v.map(file => file.name).join(', ');
- } else {
- return this.v.name;
+ if (ev.code === 'Enter') {
+ context.emit('enter');
}
- }
- },
- watch: {
- value(v) {
- this.v = v;
- },
- v(v) {
- if (this.type === 'number') {
- this.$emit('input', parseFloat(v));
+ };
+
+ watch(value, newValue => {
+ v.value = newValue;
+ });
+
+ watch(v, newValue => {
+ if (type?.value === 'number') {
+ context.emit('update:value', parseFloat(newValue));
} else {
- this.$emit('input', v);
+ context.emit('update:value', newValue);
}
- this.invalid = this.$refs.input.validity.badInput;
- }
- },
- mounted() {
- if (this.autofocus) {
- this.$nextTick(() => {
- this.$refs.input.focus();
- });
- }
+ invalid.value = inputEl.value.validity.badInput;
+ });
- this.$nextTick(() => {
- // このコンポーネントが作成された時、非表示状態である場合がある
- // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
- const clock = setInterval(() => {
- if (this.$refs.prefix) {
- this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
- if (this.$refs.prefix.offsetWidth) {
- this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
- }
+ onMounted(() => {
+ nextTick(() => {
+ if (autofocus.value) {
+ focus();
}
- if (this.$refs.suffix) {
- if (this.$refs.suffix.offsetWidth) {
- this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
+
+ // このコンポーネントが作成された時、非表示状態である場合がある
+ // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+ const clock = setInterval(() => {
+ if (prefixEl.value) {
+ labelEl.value.style.left = (prefixEl.value.offsetLeft + prefixEl.value.offsetWidth) + 'px';
+ if (prefixEl.value.offsetWidth) {
+ inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+ }
}
- }
- }, 100);
+ if (suffixEl.value) {
+ if (suffixEl.value.offsetWidth) {
+ inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+ }
+ }
+ }, 100);
- this.$once('hook:beforeDestroy', () => {
- clearInterval(clock);
+ onUnmounted(() => {
+ clearInterval(clock);
+ });
});
});
- this.$on('keydown', (e: KeyboardEvent) => {
- if (e.code == 'Enter') {
- this.$emit('enter');
- }
- });
+ return {
+ id,
+ v,
+ focused,
+ invalid,
+ changed,
+ filled,
+ inputEl,
+ prefixEl,
+ suffixEl,
+ labelEl,
+ focus,
+ onInput,
+ onKeydown,
+ faExclamationCircle,
+ };
},
- methods: {
- focus() {
- this.$refs.input.focus();
- },
- togglePassword() {
- if (this.type == 'password') {
- this.type = 'text'
- } else {
- this.type = 'password'
- }
- },
- chooseFile() {
- this.$refs.file.click();
- },
- onChangeFile() {
- this.v = Array.from((this.$refs.file as any).files);
- this.$emit('input', this.v);
- this.$emit('change', this.v);
- },
- onInput(ev) {
- this.changed = true;
- this.$emit('change', ev);
- }
- }
});
</script>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-08 10:14:18 +0000