small refactoring
This commit is contained in:
parent
4302176348
commit
f220f9d9d7
5
frontend/wizard-vue/src/common/enum.ts
Normal file
5
frontend/wizard-vue/src/common/enum.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export type EnumValue = {
|
||||||
|
label: string
|
||||||
|
value: number
|
||||||
|
}
|
||||||
|
export type Enum = EnumValue[]
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import TextField from "@/components/TextField.vue";
|
import TextField from "@/components/inputs/TextField.vue";
|
||||||
import Btn from "@/components/Btn.vue";
|
import Btn from "@/components/Btn.vue";
|
||||||
import {onMounted, onUnmounted, ref, watch} from "vue";
|
import {onMounted, onUnmounted, ref, watch} from "vue";
|
||||||
import Modal from "@/components/Modal.vue";
|
import Modal from "@/components/Modal.vue";
|
||||||
|
|||||||
@ -1,45 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type {Field} from "@/urlmaker/specs.ts";
|
|
||||||
import {getCurrentInstance, onMounted, useTemplateRef} from "vue";
|
|
||||||
|
|
||||||
const {field, focused} = defineProps<{
|
|
||||||
field: Field,
|
|
||||||
focused?: boolean,
|
|
||||||
}>();
|
|
||||||
const id = 'field' + getCurrentInstance()?.uid;
|
|
||||||
const model = defineModel();
|
|
||||||
|
|
||||||
const inputRef = useTemplateRef('field');
|
|
||||||
onMounted(() => {
|
|
||||||
if(focused) inputRef.value?.focus();
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label"><label :for="id">{{ field.label }}</label></div>
|
|
||||||
<div class="input">
|
|
||||||
<input :type="field.input_type" :name="field.name" :id="id" v-model="model" ref="field"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
div.field {
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
|
||||||
div.label {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
div.input {
|
|
||||||
margin: 2px 0 0 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
input {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {fields, InputType, type SpecField} from '@/urlmaker/specs.ts';
|
import {fields, InputType, type SpecField} from '@/urlmaker/specs.ts';
|
||||||
import TextField from "@/components/TextField.vue";
|
import TextField from "@/components/inputs/TextField.vue";
|
||||||
import RadioButtons from "@/components/RadioButtons.vue";
|
import RadioButtons from "@/components/inputs/RadioButtons.vue";
|
||||||
import {useWizardStore} from "@/stores/wizard.ts";
|
import {useWizardStore} from "@/stores/wizard.ts";
|
||||||
|
|
||||||
const store = useWizardStore();
|
const store = useWizardStore();
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {getCurrentInstance} from "vue";
|
import {getCurrentInstance} from "vue";
|
||||||
import type {Enum} from "@/urlmaker/specs.ts";
|
|
||||||
|
import type {Enum} from "@/common/enum.ts";
|
||||||
|
|
||||||
const {name, label, values} = defineProps<{
|
const {name, label, values} = defineProps<{
|
||||||
name: string
|
name: string
|
||||||
@ -6,6 +6,7 @@ import {
|
|||||||
type validator
|
type validator
|
||||||
} from "@/urlmaker/validators.ts";
|
} from "@/urlmaker/validators.ts";
|
||||||
import {rssalchemy} from "@/urlmaker/proto/specs.ts";
|
import {rssalchemy} from "@/urlmaker/proto/specs.ts";
|
||||||
|
import type {Enum} from "@/common/enum.ts";
|
||||||
|
|
||||||
export type SpecKey = ReturnType<rssalchemy.Specs['toObject']>;
|
export type SpecKey = ReturnType<rssalchemy.Specs['toObject']>;
|
||||||
export type SpecValue = string | number;
|
export type SpecValue = string | number;
|
||||||
@ -17,12 +18,6 @@ export enum InputType {
|
|||||||
Radio = 'radio'
|
Radio = 'radio'
|
||||||
}
|
}
|
||||||
|
|
||||||
export type EnumValue = {
|
|
||||||
label: string
|
|
||||||
value: number
|
|
||||||
}
|
|
||||||
export type Enum = EnumValue[]
|
|
||||||
|
|
||||||
export interface SpecField {
|
export interface SpecField {
|
||||||
name: keyof Specs
|
name: keyof Specs
|
||||||
input_type: InputType
|
input_type: InputType
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user