View | Details | Raw Unified | Return to bug 41151
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputNumber.vue (-2 / +78 lines)
Lines 1-5 Link Here
1
<template>
1
<template>
2
    <span v-if="clearable" class="input-group">
3
        <input
4
            :id="id"
5
            inputmode="numeric"
6
            v-model="model"
7
            :placeholder="placeholder"
8
            :required="required"
9
            :size="size"
10
            class="input-with-clear"
11
        />
12
        <button
13
            v-if="model !== null && model !== undefined && model !== ''"
14
            type="button"
15
            class="clear-button"
16
            @click="clearInput"
17
            :aria-label="$__('Clear')"
18
            tabindex="-1"
19
        >
20
            <i class="fa fa-times"></i>
21
        </button>
22
    </span>
2
    <input
23
    <input
24
        v-else
3
        :id="id"
25
        :id="id"
4
        inputmode="numeric"
26
        inputmode="numeric"
5
        v-model="model"
27
        v-model="model"
Lines 11-16 Link Here
11
33
12
<script>
34
<script>
13
import { computed } from "vue";
35
import { computed } from "vue";
36
import { $__ } from "@koha-vue/i18n";
14
export default {
37
export default {
15
    props: {
38
    props: {
16
        id: String,
39
        id: String,
Lines 18-23 export default { Link Here
18
        placeholder: String,
41
        placeholder: String,
19
        required: Boolean,
42
        required: Boolean,
20
        size: Number | null,
43
        size: Number | null,
44
        clearable: {
45
            type: Boolean,
46
            default: true,
47
        },
21
    },
48
    },
22
    emits: ["update:modelValue"],
49
    emits: ["update:modelValue"],
23
    setup(props, { emit }) {
50
    setup(props, { emit }) {
Lines 33-42 export default { Link Here
33
                emit("update:modelValue", value);
60
                emit("update:modelValue", value);
34
            },
61
            },
35
        });
62
        });
36
        return { model };
63
64
        const clearInput = () => {
65
            model.value = "";
66
        };
67
68
        return { model, clearInput, $__ };
37
    },
69
    },
38
    name: "InputNumber",
70
    name: "InputNumber",
39
};
71
};
40
</script>
72
</script>
41
73
42
<style></style>
74
<style scoped>
75
.input-group {
76
    position: relative;
77
    display: inline;
78
}
79
80
/* Input with clear button gets padding for the button */
81
input.input-with-clear {
82
    padding-right: 2rem;
83
}
84
85
.clear-button {
86
    position: absolute;
87
    right: 0.25rem;
88
    top: 50%;
89
    transform: translateY(-50%);
90
    background: transparent;
91
    border: none;
92
    color: #999;
93
    cursor: pointer;
94
    padding: 0.25rem 0.5rem;
95
    line-height: 1;
96
    transition: color 0.15s ease-in-out;
97
    z-index: 10;
98
    height: 1.5rem;
99
    display: flex;
100
    align-items: center;
101
    justify-content: center;
102
    margin: 0;
103
}
104
105
.clear-button:hover {
106
    color: #333;
107
}
108
109
.clear-button:focus {
110
    outline: 2px solid #007bff;
111
    outline-offset: 2px;
112
    border-radius: 2px;
113
}
114
115
.clear-button i {
116
    font-size: 1rem;
117
}
118
</style>
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputText.vue (-2 / +77 lines)
Lines 1-5 Link Here
1
<template>
1
<template>
2
    <span v-if="clearable" class="input-group">
3
        <input
4
            :id="id"
5
            type="text"
6
            v-model="model"
7
            :placeholder="placeholder"
8
            :required="required"
9
            class="input-with-clear"
10
        />
11
        <button
12
            v-if="model"
13
            type="button"
14
            class="clear-button"
15
            @click="clearInput"
16
            :aria-label="$__('Clear')"
17
            tabindex="-1"
18
        >
19
            <i class="fa fa-times"></i>
20
        </button>
21
    </span>
2
    <input
22
    <input
23
        v-else
3
        :id="id"
24
        :id="id"
4
        type="text"
25
        type="text"
5
        v-model="model"
26
        v-model="model"
Lines 10-21 Link Here
10
31
11
<script>
32
<script>
12
import { computed } from "vue";
33
import { computed } from "vue";
34
import { $__ } from "@koha-vue/i18n";
13
export default {
35
export default {
14
    props: {
36
    props: {
15
        id: String,
37
        id: String,
16
        modelValue: String,
38
        modelValue: String,
17
        placeholder: String,
39
        placeholder: String,
18
        required: Boolean,
40
        required: Boolean,
41
        clearable: {
42
            type: Boolean,
43
            default: true,
44
        },
19
    },
45
    },
20
    emits: ["update:modelValue"],
46
    emits: ["update:modelValue"],
21
    setup(props, { emit }) {
47
    setup(props, { emit }) {
Lines 27-36 export default { Link Here
27
                emit("update:modelValue", value);
53
                emit("update:modelValue", value);
28
            },
54
            },
29
        });
55
        });
30
        return { model };
56
57
        const clearInput = () => {
58
            model.value = "";
59
        };
60
61
        return { model, clearInput, $__ };
31
    },
62
    },
32
    name: "InputText",
63
    name: "InputText",
33
};
64
};
34
</script>
65
</script>
35
66
36
<style></style>
67
<style scoped>
68
.input-group {
69
    position: relative;
70
    display: inline;
71
}
72
73
/* Input with clear button gets padding for the button */
74
input.input-with-clear {
75
    padding-right: 2rem;
76
}
77
78
.clear-button {
79
    position: absolute;
80
    right: 0.25rem;
81
    top: 50%;
82
    transform: translateY(-50%);
83
    background: transparent;
84
    border: none;
85
    color: #999;
86
    cursor: pointer;
87
    padding: 0.25rem 0.5rem;
88
    line-height: 1;
89
    transition: color 0.15s ease-in-out;
90
    z-index: 10;
91
    height: 1.5rem;
92
    display: flex;
93
    align-items: center;
94
    justify-content: center;
95
    margin: 0;
96
}
97
98
.clear-button:hover {
99
    color: #333;
100
}
101
102
.clear-button:focus {
103
    outline: 2px solid #007bff;
104
    outline-offset: 2px;
105
    border-radius: 2px;
106
}
107
108
.clear-button i {
109
    font-size: 1rem;
110
}
111
</style>
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/TextArea.vue (-3 / +77 lines)
Lines 1-5 Link Here
1
<template>
1
<template>
2
    <span v-if="clearable" class="textarea-group">
3
        <textarea
4
            :id="id"
5
            v-model="model"
6
            :rows="rows"
7
            :cols="cols"
8
            :placeholder="placeholder"
9
            :required="required"
10
            class="textarea-with-clear"
11
        />
12
        <button
13
            v-if="model"
14
            type="button"
15
            class="clear-button"
16
            @click="clearInput"
17
            :aria-label="$__('Clear')"
18
            tabindex="-1"
19
        >
20
            <i class="fa fa-times"></i>
21
        </button>
22
    </span>
2
    <textarea
23
    <textarea
24
        v-else
3
        :id="id"
25
        :id="id"
4
        v-model="model"
26
        v-model="model"
5
        :rows="rows"
27
        :rows="rows"
Lines 11-16 Link Here
11
33
12
<script>
34
<script>
13
import { computed } from "vue";
35
import { computed } from "vue";
36
import { $__ } from "@koha-vue/i18n";
14
export default {
37
export default {
15
    props: {
38
    props: {
16
        id: String,
39
        id: String,
Lines 25-30 export default { Link Here
25
            type: Number,
48
            type: Number,
26
            default: 50,
49
            default: 50,
27
        },
50
        },
51
        clearable: {
52
            type: Boolean,
53
            default: true,
54
        },
28
    },
55
    },
29
    emits: ["update:modelValue"],
56
    emits: ["update:modelValue"],
30
    setup(props, { emit }) {
57
    setup(props, { emit }) {
Lines 36-45 export default { Link Here
36
                emit("update:modelValue", value);
63
                emit("update:modelValue", value);
37
            },
64
            },
38
        });
65
        });
39
        return { model };
66
67
        const clearInput = () => {
68
            model.value = "";
69
        };
70
71
        return { model, clearInput, $__ };
40
    },
72
    },
41
    name: "TextArea",
73
    name: "TextArea",
42
};
74
};
43
</script>
75
</script>
44
76
45
<style></style>
77
<style scoped>
78
.textarea-group {
79
    position: relative;
80
    display: inline-block;
81
}
82
83
/* Textarea with clear button gets padding for the button */
84
textarea.textarea-with-clear {
85
    padding-right: 2rem;
86
}
87
88
.clear-button {
89
    position: absolute;
90
    right: 0.5rem;
91
    top: 0.5rem;
92
    background: transparent;
93
    border: none;
94
    color: #999;
95
    cursor: pointer;
96
    padding: 0.25rem 0.5rem;
97
    line-height: 1;
98
    transition: color 0.15s ease-in-out;
99
    z-index: 10;
100
    height: 1.5rem;
101
    display: flex;
102
    align-items: center;
103
    justify-content: center;
104
    margin: 0;
105
}
106
107
.clear-button:hover {
108
    color: #333;
109
}
110
111
.clear-button:focus {
112
    outline: 2px solid #007bff;
113
    outline-offset: 2px;
114
    border-radius: 2px;
115
}
116
117
.clear-button i {
118
    font-size: 1rem;
119
}
120
</style>
46
- 

Return to bug 41151