feat(mirinae): add boolean type to jsonSchemaForm (#3608)

* fix(mirinae): fix build error

Signed-off-by: sulmo <[email protected]>

* feat(mirinae): add boolean type to jsonSchemaForm

Signed-off-by: sulmo <[email protected]>

* fix: fix badge setting of text input

Signed-off-by: sulmo <[email protected]>

---------

Signed-off-by: sulmo <[email protected]>

Author: sulmoJ

packages/mirinae/src/data-display/dynamic/dynamic-layout/templates/item/index.vue

@@ -7,7 +7,7 @@
         </p-heading>
         <p-definition-table :fields="fields"
                             :data="rootData"
-                            :style-type="options?.styleType"
+                            :style-type="options.styleType"
                             :loading="loading"
                             v-on="$listeners"
         >

packages/mirinae/src/inputs/forms/json-schema-form/PJsonSchemaForm.stories.mdx

@@ -101,8 +101,9 @@ It internally uses [Ajv JSON schema validator](https://ajv.js.org/) and [ajv-for
 |string|ajv|[Text Input](?path=/docs/inputs-input--basic)|
 |number|ajv|[Text Input](?path=/docs/inputs-input--basic)|
 |integer|ajv|[Text Input](?path=/docs/inputs-input--basic)|
-|array|ajv|[Text Input](?path=/docs/inputs-input--basic) or [Filterable Dropdown](?path=/docs/inputs-dropdown-select-dropdown--basic)(with enum keyword)||
-|object|self| Json Schema Form ||
+|array|ajv|[Text Input](?path=/docs/inputs-input--basic) or [Filterable Dropdown](?path=/docs/inputs-dropdown-select-dropdown--basic)(with enum keyword)|
+|boolean|ajv|[Toggle](?path=/docs/inputs-buttons-toggle-button--toggle-button-basic)|
+|object|self| Json Schema Form |
 
 ### Formats
 **string type only**

packages/mirinae/src/inputs/forms/json-schema-form/PJsonSchemaForm.vue

@@ -117,6 +117,13 @@
                                     />
                                 </template>
                             </p-select-dropdown>
+                            <p-toggle-button v-else-if="schemaProperty.componentName === 'PToggleButton'"
+                                             :key="`PToggleButton-${schemaProperty.propertyName}`"
+                                             :value="rawFormData[schemaProperty.propertyName]"
+                                             :disabled="schemaProperty.disabled"
+                                             class="input-form"
+                                             @update:value="handleUpdateFormValue(schemaProperty, propertyIdx, ...arguments)"
+                            />
                             <template v-else>
                                 <p-text-input :key="`PTextInput-${schemaProperty.propertyName}`"
                                               :value="schemaProperty.multiInputMode ? undefined : rawFormData[schemaProperty.propertyName]"
@@ -159,6 +166,7 @@ import addFormats from 'ajv-formats';
 import { isEqual } from 'lodash';
 
 import PMarkdown from '@/data-display/markdown/PMarkdown.vue';
+import PToggleButton from '@/inputs/buttons/toggle-button/PToggleButton.vue';
 import PSelectDropdown from '@/inputs/dropdown/select-dropdown/PSelectDropdown.vue';
 import PFieldGroup from '@/inputs/forms/field-group/PFieldGroup.vue';
 import GenerateIdFormat from '@/inputs/forms/json-schema-form/components/GenerateIdFormat.vue';
@@ -200,6 +208,7 @@ export default defineComponent<JsonSchemaFormProps>({
         PMarkdown,
         PFieldGroup,
         PTextInput,
+        PToggleButton,
     },
     props: {
         schema: {

packages/mirinae/src/inputs/forms/json-schema-form/helpers/form-data-refine-helper.ts

@@ -34,6 +34,7 @@ export const refineValueByProperty = (schema: JsonSchema, val?: any): any => {
         }
     }
     if (typeof val === 'string') return val?.trim() || undefined;
+    if (typeof val === 'boolean') return val;
     return undefined;
 };
 

packages/mirinae/src/inputs/forms/json-schema-form/helpers/inner-schema-helper.ts

@@ -47,6 +47,7 @@ export const getComponentNameBySchemaProperty = (schemaProperty: JsonSchema): Co
     if (schemaProperty.type === 'object') return 'PJsonSchemaForm';
     if (Array.isArray(schemaProperty.enum) && schemaProperty.type === 'string') return 'PSelectDropdown';
     if (isStrictArraySelectMode(schemaProperty)) return 'PFilterableDropdown';
+    if (schemaProperty.type === 'boolean') return 'PToggleButton';
     return 'PTextInput';
 };
 

packages/mirinae/src/inputs/forms/json-schema-form/mock.ts

@@ -33,6 +33,11 @@ export const getDefaultSchema = () => ({
             format: 'generate_id',
             markdown: '[How to generate ID?](https://www.google.com)',
         },
+        is_that_true: {
+            type: 'boolean',
+            title: 'Is that true?',
+            default: true,
+        },
         password: {
             title: 'Password',
             minLength: 8,
@@ -178,7 +183,7 @@ G6aFKaqQfOXKCyWoUiVknQJAXsssyFFci/2ueKlIE1QqIiLSZ8V8OlpFLRnb1pzI
         },
     },
     required: ['user_id', 'password', 'user_name', 'age', 'homepage', 'phone', 'additional', 'emails', 'colors', 'provider', 'friends', 'pem_key'],
-    order: ['user_id', 'password', 'user_name', 'user_nickname', 'country_code', 'provider', 'age', 'phone', 'homepage', 'additional', 'colors', 'foods', 'food', 'pem_key'],
+    order: ['user_id', 'is_that_true', 'password', 'user_name', 'user_nickname', 'country_code', 'provider', 'age', 'phone', 'homepage', 'additional', 'colors', 'foods', 'food', 'pem_key'],
 });
 
 export const getDefaultFormData = () => ({

packages/mirinae/src/inputs/forms/json-schema-form/type.ts

@@ -5,7 +5,7 @@ import type { SupportLanguage } from '@/translations';
 const TEXT_INPUT_TYPES = ['password', 'text', 'number'] as const;
 export type TextInputType = typeof TEXT_INPUT_TYPES[number];
 
-const COMPONENTS = ['PTextInput', 'GenerateIdFormat', 'PJsonSchemaForm', 'PSelectDropdown', 'PFilterableDropdown', 'PEMKeyFormat'] as const;
+const COMPONENTS = ['PTextInput', 'GenerateIdFormat', 'PJsonSchemaForm', 'PSelectDropdown', 'PFilterableDropdown', 'PEMKeyFormat', 'PToggleButton'] as const;
 export type ComponentName = typeof COMPONENTS[number];
 
 interface Reference {

packages/mirinae/src/inputs/input/text-input/PTextInput.vue

@@ -29,6 +29,7 @@
                     >
                         {{ proxySelected[0].label || proxySelected[0].name }}
                         <p-badge v-if="proxySelected.length > 1"
+                                 badge-type="subtle"
                                  :style-type="disabled ? 'gray200' : 'blue200'"
                         >
                             +{{ proxySelected.length - 1 }}
@@ -544,7 +545,7 @@ export default defineComponent<TextInputProps>({
         @apply w-full;
     }
     > .input-container {
-        @apply inline-flex border bg-white text-gray-900 rounded items-center;
+        @apply inline-flex border border-gray-300 bg-white text-gray-900 rounded items-center;
         width: inherit;
         min-height: 2rem;
         height: auto;