Skip to content

Commit 2658650

Browse files
yuda110yuda110
authored
feat(json-schema-form): add input-extra slot (#346)
* feat(json-schema-form): add `input-extra` slot Signed-off-by: yuda <yuda@megazone.com> * fix(json-schema-form): fix type error of `reference` keyword Signed-off-by: yuda <yuda@megazone.com> * style(filterable-dropdown): fix style bug Signed-off-by: yuda <yuda@megazone.com> --------- Signed-off-by: yuda <yuda@megazone.com>
1 parent c2a8107 commit 2658650

File tree

4 files changed

+133
-102
lines changed

4 files changed

+133
-102
lines changed

‎src/inputs/dropdown/filterable-dropdown/PFilterableDropdown.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
>
2323
{{ displayValueOnDropdownButton }}
2424
<p-badge v-if="displayBadgeValueOnDropdownButton"
25+
badge-type="subtle"
2526
:style-type="disabled ? 'gray200' : 'blue200'"
2627
>
2728
{{ displayBadgeValueOnDropdownButton }}

‎src/inputs/forms/json-schema-form/PJsonSchemaForm.vue‎

Lines changed: 79 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -53,75 +53,82 @@
5353
</span>
5454
</template>
5555
<template #default="{invalid}">
56-
<generate-id-format v-if="schemaProperty.componentName === 'GenerateIdFormat'"
57-
:key="`GenerateIdFormat-${schemaProperty.propertyName}`"
58-
:value="rawFormData[schemaProperty.propertyName]"
59-
:disabled="schemaProperty.disabled"
60-
:invalid="invalid"
61-
class="input-form"
62-
@update:value="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
63-
/>
64-
<p-json-schema-form v-else-if="schemaProperty.componentName === 'PJsonSchemaForm'"
65-
:key="`PJsonSchemaForm-${schemaProperty.propertyName}`"
66-
:form-data="rawFormData[schemaProperty.propertyName]"
67-
:schema="schemaProperty"
68-
:is-root="false"
69-
@update:form-data="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
70-
/>
71-
<p-select-dropdown v-else-if="schemaProperty.componentName === 'PSelectDropdown'"
72-
:key="`PSelectDropdown-${schemaProperty.propertyName}`"
73-
:selected="rawFormData[schemaProperty.propertyName]"
74-
:items="schemaProperty.menuItems"
75-
:disabled="schemaProperty.disabled"
76-
:use-fixed-menu-style="useFixedMenuStyle"
77-
class="input-form"
78-
@update:selected="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
79-
>
80-
<template #default="{ item }">
81-
<slot name="dropdown-extra"
82-
v-bind="{...schemaProperty, selectedItem: item }"
56+
<div class="field-group-default-wrapper">
57+
<div class="input-wrapper">
58+
<generate-id-format v-if="schemaProperty.componentName === 'GenerateIdFormat'"
59+
:key="`GenerateIdFormat-${schemaProperty.propertyName}`"
60+
:value="rawFormData[schemaProperty.propertyName]"
61+
:disabled="schemaProperty.disabled"
62+
:invalid="invalid"
63+
class="input-form"
64+
@update:value="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
8365
/>
84-
</template>
85-
</p-select-dropdown>
86-
<p-filterable-dropdown v-else-if="schemaProperty.componentName === 'PFilterableDropdown'"
87-
:key="`PFilterableDropdown-${schemaProperty.propertyName}`"
88-
:menu="schemaProperty.menuItems"
89-
:selected="rawFormData[schemaProperty.propertyName]"
90-
:multi-selectable="schemaProperty.multiInputMode"
91-
:appearance-type="schemaProperty.appearanceType"
92-
:page-size="10"
93-
show-select-marker
94-
:use-fixed-menu-style="useFixedMenuStyle"
95-
:invalid="invalid"
96-
:handler="schemaProperty.referenceHandler"
97-
class="input-form"
98-
@update:selected="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
99-
>
100-
<template #selected-extra="{ items }">
101-
<slot name="dropdown-extra"
102-
v-bind="{...schemaProperty, selectedItem: items}"
66+
<p-json-schema-form v-else-if="schemaProperty.componentName === 'PJsonSchemaForm'"
67+
:key="`PJsonSchemaForm-${schemaProperty.propertyName}`"
68+
:form-data="rawFormData[schemaProperty.propertyName]"
69+
:schema="schemaProperty"
70+
:is-root="false"
71+
@update:form-data="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
10372
/>
104-
</template>
105-
</p-filterable-dropdown>
106-
<template v-else>
107-
<p-text-input :key="`PTextInput-${schemaProperty.propertyName}`"
108-
:value="schemaProperty.multiInputMode ? undefined : rawFormData[schemaProperty.propertyName]"
109-
:selected="schemaProperty.multiInputMode ? rawFormData[schemaProperty.propertyName] : undefined"
110-
:type="schemaProperty.inputType"
111-
:invalid="invalid"
112-
:placeholder="schemaProperty.inputPlaceholder"
113-
:appearance-type="schemaProperty.appearanceType"
114-
:autocomplete="false"
115-
:use-auto-complete="schemaProperty.useAutoComplete"
116-
:use-fixed-menu-style="useFixedMenuStyle"
117-
:disabled="schemaProperty.disabled"
118-
:multi-input="schemaProperty.multiInputMode"
119-
:page-size="10"
120-
class="input-form"
121-
@update:value="!schemaProperty.multiInputMode && handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
122-
@update:selected="schemaProperty.multiInputMode && handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
73+
<p-select-dropdown v-else-if="schemaProperty.componentName === 'PSelectDropdown'"
74+
:key="`PSelectDropdown-${schemaProperty.propertyName}`"
75+
:selected="rawFormData[schemaProperty.propertyName]"
76+
:items="schemaProperty.menuItems"
77+
:disabled="schemaProperty.disabled"
78+
:use-fixed-menu-style="useFixedMenuStyle"
79+
class="input-form"
80+
@update:selected="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
81+
>
82+
<template #default="{ item }">
83+
<slot name="dropdown-extra"
84+
v-bind="{...schemaProperty, selectedItem: item }"
85+
/>
86+
</template>
87+
</p-select-dropdown>
88+
<p-filterable-dropdown v-else-if="schemaProperty.componentName === 'PFilterableDropdown'"
89+
:key="`PFilterableDropdown-${schemaProperty.propertyName}`"
90+
:menu="schemaProperty.menuItems"
91+
:selected="rawFormData[schemaProperty.propertyName]"
92+
:multi-selectable="schemaProperty.multiInputMode"
93+
:appearance-type="schemaProperty.appearanceType"
94+
:page-size="10"
95+
show-select-marker
96+
:use-fixed-menu-style="useFixedMenuStyle"
97+
:invalid="invalid"
98+
:handler="schemaProperty.referenceHandler"
99+
class="input-form"
100+
@update:selected="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
101+
>
102+
<template #selected-extra="{ items }">
103+
<slot name="dropdown-extra"
104+
v-bind="{...schemaProperty, selectedItem: items}"
105+
/>
106+
</template>
107+
</p-filterable-dropdown>
108+
<template v-else>
109+
<p-text-input :key="`PTextInput-${schemaProperty.propertyName}`"
110+
:value="schemaProperty.multiInputMode ? undefined : rawFormData[schemaProperty.propertyName]"
111+
:selected="schemaProperty.multiInputMode ? rawFormData[schemaProperty.propertyName] : undefined"
112+
:type="schemaProperty.inputType"
113+
:invalid="invalid"
114+
:placeholder="schemaProperty.inputPlaceholder"
115+
:appearance-type="schemaProperty.appearanceType"
116+
:autocomplete="false"
117+
:use-auto-complete="schemaProperty.useAutoComplete"
118+
:use-fixed-menu-style="useFixedMenuStyle"
119+
:disabled="schemaProperty.disabled"
120+
:multi-input="schemaProperty.multiInputMode"
121+
:page-size="10"
122+
class="input-form"
123+
@update:value="!schemaProperty.multiInputMode && handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
124+
@update:selected="schemaProperty.multiInputMode && handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
125+
/>
126+
</template>
127+
</div>
128+
<slot name="input-extra"
129+
v-bind="schemaProperty"
123130
/>
124-
</template>
131+
</div>
125132
</template>
126133
</p-field-group>
127134
</template>
@@ -398,6 +405,12 @@ export default defineComponent<JsonSchemaFormProps>({
398405
> .input-form-wrapper.no-margin {
399406
margin-bottom: 0;
400407
}
408+
.field-group-default-wrapper {
409+
display: flex;
410+
.input-wrapper {
411+
flex-grow: 1;
412+
}
413+
}
401414
.invalid-message {
402415
display: block;
403416
margin-bottom: 0.25rem;

‎src/inputs/forms/json-schema-form/mock.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export const getDefaultSchema = () => ({
147147
friends: {
148148
title: 'Friends (use referenceHandler)',
149149
type: 'array',
150-
reference: 'friend',
150+
reference: { resource_type: 'friend', reference_key: 'friend' },
151151
items: {},
152152
},
153153
},

‎src/inputs/forms/json-schema-form/story-helper.ts‎

Lines changed: 52 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -79,41 +79,6 @@ export const getJsonSchemaFormArgTypes = (): ArgTypes => ({
7979
options: VALIDATION_MODES,
8080
},
8181
},
82-
// slots
83-
labelExtraSlot: {
84-
name: 'label-extra',
85-
description: 'Slot for add something into right area of label',
86-
defaultValue: null,
87-
table: {
88-
type: {
89-
summary: null,
90-
},
91-
defaultValue: {
92-
summary: null,
93-
},
94-
category: 'slots',
95-
},
96-
control: {
97-
type: 'text',
98-
},
99-
},
100-
dropdownExtraSlot: {
101-
name: 'dropdown-extra',
102-
description: 'Slot for add something into right area of selected item of `PSelectDropdown` or `PFilterableDropdown`.',
103-
defaultValue: null,
104-
table: {
105-
type: {
106-
summary: null,
107-
},
108-
defaultValue: {
109-
summary: null,
110-
},
111-
category: 'slots',
112-
},
113-
control: {
114-
type: 'text',
115-
},
116-
},
11782
resetOnSchemaChange: {
11883
name: 'resetOnSchemaChange',
11984
type: { name: 'boolean' },
@@ -184,6 +149,58 @@ export const getJsonSchemaFormArgTypes = (): ArgTypes => ({
184149
type: 'boolean',
185150
},
186151
},
152+
// slots
153+
labelExtraSlot: {
154+
name: 'label-extra',
155+
description: 'Slot for add something into right area of label',
156+
defaultValue: null,
157+
table: {
158+
type: {
159+
summary: null,
160+
},
161+
defaultValue: {
162+
summary: null,
163+
},
164+
category: 'slots',
165+
},
166+
control: {
167+
type: 'text',
168+
},
169+
},
170+
dropdownExtraSlot: {
171+
name: 'dropdown-extra',
172+
description: 'Slot for add something into right area of selected item of `PSelectDropdown` or `PFilterableDropdown`.',
173+
defaultValue: null,
174+
table: {
175+
type: {
176+
summary: null,
177+
},
178+
defaultValue: {
179+
summary: null,
180+
},
181+
category: 'slots',
182+
},
183+
control: {
184+
type: 'text',
185+
},
186+
},
187+
inputExtraSlot: {
188+
name: 'input-extra',
189+
description: 'Slot for add something into right area of input',
190+
defaultValue: null,
191+
table: {
192+
type: {
193+
summary: null,
194+
},
195+
defaultValue: {
196+
summary: null,
197+
},
198+
category: 'slots',
199+
},
200+
control: {
201+
type: 'text',
202+
},
203+
},
187204
// events
188205
onChange: {
189206
name: 'change',

0 commit comments

Comments
 (0)