alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: numInput属性UI追加

Browse Source 
inputText,numInputにrules設定追加、入力ルール設定可能
This commit is contained in:
maxiaozhe@alicorns.co.jp
2024-05-09 10:49:05 +09:00
parent 329debaab8
commit c426bbf793
13 changed files with 335 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/right/AppFieldSelect.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="q-my-md">
<div class="q-my-md" v-bind="$attrs">
<q-card flat>
<q-card-section class="q-pa-none q-my-sm q-mr-md">
<!-- <div class=" q-my-none ">App Field Select</div> -->
@@ -128,6 +127,7 @@ interface IAppFields{
}
export default defineComponent({
inheritAttrs:false,
name: 'FieldInput',
components: {
ShowDialog,

20
frontend/src/components/right/ColorPicker.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="">
<q-field v-model="color" :label="displayName" bottom-slots labelColor="primary">
<div class="" v-bind="$attrs">
<q-field v-model="color" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
<template v-slot:control>
<q-chip text-color="black" color="white">
<q-chip text-color="black" color="white" v-if="isSelected">
<div class="row">
<div class="col-4">
<q-avatar class="shadow-1" :style="{ background: color }" size="xs"></q-avatar>
@@ -14,7 +14,7 @@
</q-chip>
</template>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer">
<q-icon name="colorize" class="cursor-pointer" color="primary" >
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-color no-header default-view="palette" v-model="color" />
</q-popup-proxy>
@@ -30,8 +30,9 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { computed, defineComponent, ref,watchEffect } from 'vue';
export default defineComponent({
inheritAttrs:false,
name: 'ColorPicker',
components: {
},
@@ -53,15 +54,20 @@ export default defineComponent({
default: '',
},
modelValue: {
type: Object,
type: String,
default: null
},
},
setup(props, { emit }) {
const color = ref("#ffffff");
const color = ref(props.modelValue??"");
const isSelected = computed(()=>props.modelValue && props.modelValue!=="");
watchEffect(()=>{
emit('update:modelValue', color.value);
});
return {
color,
isSelected
};
}
});

31
frontend/src/components/right/ConditionInput.vue
View File

@@ -1,18 +1,20 @@
<template>
<q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
<template v-slot:control >
<q-card flat class="full-width">
<q-card-actions vertical>
<q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
</q-card-actions>
<q-card-section class="text-caption" >
<div v-if="!isSetted">{{ placeholder }}</div>
<div v-else>{{ conditionString }}</div>
</q-card-section>
</q-card>
</template>
</q-field>
<condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
<div v-bind="$attrs">
<q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
<template v-slot:control >
<q-card flat class="full-width">
<q-card-actions vertical>
<q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
</q-card-actions>
<q-card-section class="text-caption" >
<div v-if="!isSetted">{{ placeholder }}</div>
<div v-else>{{ conditionString }}</div>
</q-card-section>
</q-card>
</template>
</q-field>
<condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
</div>
</template>
<script lang="ts">
@@ -21,6 +23,7 @@
import ConditionEditor from '../ConditionEditor/ConditionEditor.vue'
export default defineComponent({
name: 'FieldInput',
inheritAttrs:false,
components: {
ConditionEditor
},

30
frontend/src/components/right/DatePicker.vue
View File

@@ -1,18 +1,19 @@
<template>
<q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date v-model="selectedDate">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
<div v-bind="$attrs">
<q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date v-model="selectedDate">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</template>
<script lang="ts">
@@ -20,6 +21,7 @@ import { defineComponent, ref ,watchEffect} from 'vue';
export default defineComponent({
name: 'DatePicker',
inheritAttrs:false,
props: {
displayName:{
type: String,

13
frontend/src/components/right/EventSetter.vue
View File

@@ -1,9 +1,11 @@
<template>
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
<template v-slot:append>
<q-btn round dense flat icon="add" @click="addButtonEvent()" />
</template>
</q-input>
<div v-bind="$attrs">
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
<template v-slot:append>
<q-btn round dense flat icon="add" @click="addButtonEvent()" />
</template>
</q-input>
</div>
</template>
<script lang="ts">
@@ -13,6 +15,7 @@ import { IKintoneEventGroup,kintoneEvent } from 'src/types/KintoneEvents';
export default defineComponent({
name: 'EventSetter',
inheritAttrs:false,
props: {
displayName:{
type: String,

159
frontend/src/components/right/FieldInput.vue
View File

@@ -1,8 +1,9 @@
<template>
<q-field v-model="selectedField" :label="displayName" labelColor="primary"
:clearable="isSelected" stack-label :bottom-slots="!isSelected" >
<template v-slot:control >
<q-chip color="primary" text-color="white" v-if="isSelected">
<div v-bind="$attrs">
<q-field v-model="selectedField" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label
:bottom-slots="!isSelected">
<template v-slot:control>
<q-chip color="primary" text-color="white" v-if="isSelected">
{{ selectedField.name }}
</q-chip>
</template>
@@ -14,85 +15,87 @@
</template>
<template v-slot:append>
<q-icon name="search" class="cursor-pointer" color="primary" @click="showDg"/>
<q-icon name="search" class="cursor-pointer" color="primary" @click="showDg" />
</template>
</q-field>
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
</show-dialog>
</template>
</div>
</template>
<script lang="ts">
import { defineComponent, ref ,watchEffect,computed} from 'vue';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
interface IField{
name:string,
code:string,
type:string
}
export default defineComponent({
name: 'FieldInput',
components: {
ShowDialog,
FieldSelect,
},
props: {
displayName:{
type: String,
default: '',
},
name:{
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
hint:{
type: String,
default: '',
},
modelValue: {
type: Object,
default: null
},
},
<script lang="ts">
import { defineComponent, ref, watchEffect, computed } from 'vue';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
interface IField {
name: string,
code: string,
type: string
}
export default defineComponent({
name: 'FieldInput',
inheritAttrs:false,
components: {
ShowDialog,
FieldSelect,
},
props: {
displayName: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
hint: {
type: String,
default: '',
},
modelValue: {
type: Object,
default: null
},
},
setup(props, { emit }) {
const appDg = ref();
const show = ref(false);
const selectedField = ref(props.modelValue);
const store = useFlowEditorStore();
const isSelected = computed(()=>{
return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
});
const showDg = () => {
show.value = true;
};
const closeDg = (val:string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0];
}
};
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
isSelected
};
}
setup(props, { emit }) {
const appDg = ref();
const show = ref(false);
const selectedField = ref(props.modelValue);
const store = useFlowEditorStore();
const isSelected = computed(() => {
return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
});
</script>
const showDg = () => {
show.value = true;
};
const closeDg = (val: string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0];
}
};
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
isSelected
};
}
});
</script>

52
frontend/src/components/right/InputText.vue
View File

@@ -1,24 +1,34 @@
<template>
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
<template v-slot:append v-if="hint!==''">
<q-icon name="help" size="22px" color="blue-8">
<q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right"><div class="hint-text" v-html="hint"/></q-tooltip>
</q-icon>
</template>
</q-input>
<div v-bind="$attrs">
<q-input :label="displayName" v-model="inputValue" label-color="primary"
:placeholder="placeholder" stack-label
:rules="rulesExp"
:maxlength="maxLength"
>
<template v-slot:append v-if="hint !== ''">
<q-icon name="help" size="22px" color="blue-8">
<q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
<div class="hint-text" v-html="hint" />
</q-tooltip>
</q-icon>
</template>
</q-input>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,watchEffect } from 'vue';
import { kMaxLength } from 'buffer';
import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
name: 'InputText',
inheritAttrs: false,
props: {
displayName:{
displayName: {
type: String,
default: '',
},
name:{
name: {
type: String,
default: '',
},
@@ -26,33 +36,43 @@ export default defineComponent({
type: String,
default: '',
},
hint:{
hint: {
type: String,
default: '',
},
maxLength:{
type: Number,
default:undefined
},
//例：[val=>!!val ||'入力してください']
rules:{
type:String,
default:undefined
},
modelValue: {
type: String,
default: '',
},
},
setup(props , { emit }) {
setup(props, { emit }) {
const inputValue = ref(props.modelValue);
const rulesExp = props.rules===undefined?null : eval(props.rules);
watchEffect(() => {
emit('update:modelValue', inputValue.value);
});
return {
inputValue,
showhint:ref(false)
showhint: ref(false),
rulesExp
};
},
});
</script>
<style lang="scss">
.hint-text{
white-space : always;
.hint-text {
white-space: always;
max-width: 450px;
font-size: 1.2em;
}

14
frontend/src/components/right/MuiltInputText.vue
View File

@@ -1,18 +1,22 @@
<template>
<q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow stack-label/>
<div v-bind="$attrs">
<q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
stack-label />
</div>
</template>
<script lang="ts">
import { defineComponent,ref,watchEffect } from 'vue';
import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
name: 'MuiltInputText',
inheritAttrs: false,
props: {
displayName:{
displayName: {
type: String,
default: '',
},
name:{
name: {
type: String,
default: '',
},
@@ -20,7 +24,7 @@ export default defineComponent({
type: String,
default: '',
},
hint:{
hint: {
type: String,
default: '',
},

51
frontend/src/components/right/NumInput.vue
View File

@@ -1,6 +1,10 @@
<template>
<div class="">
<q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" bottom-slots>
<div class="" v-bind="$attrs">
<q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" stack-label bottom-slots
:min="min"
:max="max"
:rules="rulesExp"
>
<template v-slot:hint>
{{ placeholder }}
</template>
@@ -9,9 +13,10 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { computed, defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
name: 'NumInput',
inheritAttrs:false,
components: {
},
props: {
@@ -31,17 +36,51 @@ export default defineComponent({
type: String,
default: '',
},
min:{
type:Number,
default:undefined
},
max:{
type:Number,
default:undefined
},
//[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']
rules:{
type:String,
default:undefined
},
modelValue: {
type: Object,
default: null
type: [Number , String],
default: undefined
},
},
setup(props, { emit }) {
const numValue = ref(0);
const numValue = ref(props.modelValue);
const rulesExp = props.rules===undefined?null : eval(props.rules);
const isError = computed(()=>{
const val = numValue.value;
if (val === undefined) {
return false;
}
const numVal = typeof val === "string" ? parseInt(val) : val;
// Ensure parsed value is a valid number
if (isNaN(numVal)) {
return true;
}
// Check against min and max boundaries, if defined
if ((props.min !== undefined && numVal < props.min) || (props.max !== undefined && numVal > props.max)) {
return true;
}
return false;
});
watchEffect(()=>{
emit("update:modelValue",numValue.value);
});
return {
numValue,
rulesExp
};
}
});

2
frontend/src/components/right/PropertyList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div v-for="(item, index) in properties" :key="index" >
<component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
<component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
</div>
</div>
</template>

3
frontend/src/components/right/SelectBox.vue
View File

@@ -1,5 +1,7 @@
<template>
<div v-bind="$attrs">
<q-select v-model="selectedValue" :label="displayName" :options="options"/>
</div>
</template>
<script lang="ts">
@@ -7,6 +9,7 @@ import { defineComponent,ref,watchEffect } from 'vue';
export default defineComponent({
name: 'SelectBox',
inheritAttrs:false,
props: {
displayName:{
type: String,