feat(p-definition): add "object" & "array" type data spec (#46)

- add dataType state for checking data type. - if dataType is "object", apply to p-dict-list. - if dataType is "array", apply to p-text-list.
cloudforet-io · Sep 27, 2022 · b58c19a · b58c19a
1 parent 07c5aff
commit b58c19a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/src/data-display/tables/definition-table/definition/PDefinition.vue b/src/data-display/tables/definition-table/definition/PDefinition.vue
@@ -8,15 +8,31 @@
         <td class="value-wrapper" :class="{'auto-width': autoKeyWidth}">
             <span class="value">
                 <slot v-if="disableCopy" name="default" v-bind="{name, label, data, value: displayData}">
-                    {{ displayData }}
+                    <template v-if="dataType === 'object'">
+                        <p-dict-list class="p-dict-list" :dict="displayData" />
+                    </template>
+                    <template v-else-if="dataType === 'array'">
+                        <p-text-list :items="displayData" />
+                    </template>
+                    <template v-else>
+                        {{ displayData }}
+                    </template>
                 </slot>
                 <p-copy-button v-else
                                width="0.8rem" height="0.8rem"
                                :value="copyValueFormatter ? copyValueFormatter(data, $props) : copyValue"
                                auto-hide-icon
                 >
                     <slot name="default" v-bind="{name, label, data, value: displayData}">
-                        {{ displayData }}
+                        <template v-if="dataType === 'object'">
+                            <p-dict-list class="p-dict-list" :dict="displayData" />
+                        </template>
+                        <template v-else-if="dataType === 'array'">
+                            <p-text-list :items="displayData" />
+                        </template>
+                        <template v-else>
+                            {{ displayData }}
+                        </template>
                     </slot>
                 </p-copy-button>
             </span>
@@ -32,12 +48,14 @@ import {
     computed, defineComponent, reactive, toRefs,
 } from 'vue';
 
+import PDictList from '@/data-display/dynamic/dynamic-field/templates/list/dict-list/PDictList.vue';
 import type { DefinitionProps } from '@/data-display/tables/definition-table/definition/type';
 import PCopyButton from '@/inputs/buttons/copy-button/PCopyButton.vue';
+import PTextList from '@/others/console/text-list/PTextList.vue';
 
 export default defineComponent<DefinitionProps>({
     name: 'PDefinition',
-    components: { PCopyButton },
+    components: { PTextList, PCopyButton, PDictList },
     props: {
         name: {
             type: String,
@@ -76,12 +94,15 @@ export default defineComponent<DefinitionProps>({
             default: false,
         },
     },
-    setup(props: DefinitionProps) {
+    setup(props) {
         const state = reactive({
             displayData: computed(() => (props.formatter ? props.formatter(props.data, props) : props.data)),
+            dataType: computed(() => {
+                if (Array.isArray(props.data)) return 'array';
+                return typeof props.data;
+            }),
         });
 
-
         return {
             ...toRefs(state),
         };
@@ -153,5 +174,9 @@ export default defineComponent<DefinitionProps>({
             max-width: 100%;
         }
     }
+
+    .p-dict-list {
+        display: inline-grid;
+    }
 }
 </style>
diff --git a/src/data-display/tables/definition-table/definition/story-helper.ts b/src/data-display/tables/definition-table/definition/story-helper.ts
@@ -117,9 +117,6 @@ export const getDefinitionArgTypes = (): ArgTypes => ({
                 summary: 'undefined',
             },
         },
-        control: {
-            type: 'text',
-        },
     },
     copyValueFormatter: {
         name: 'copyValueFormatter',
@@ -138,9 +135,9 @@ export const getDefinitionArgTypes = (): ArgTypes => ({
     },
     autoKeyWidth: {
         name: 'autoKeyWidth',
-        type: { name: 'string' },
+        type: { name: 'boolean' },
         description: 'Make key width auto',
-        defaultValue: undefined,
+        defaultValue: false,
         table: {
             type: {
                 summary: 'string',
@@ -150,9 +147,6 @@ export const getDefinitionArgTypes = (): ArgTypes => ({
                 summary: 'undefined',
             },
         },
-        control: {
-            type: 'boolean',
-        },
     },
     /* slots */
     defaultSlot: {