fix(dynamic field more type): do not inherit css to children (#341)

cloudforet-io · Mar 24, 2023 · 3b30e36 · 3b30e36
1 parent 9b346e0
commit 3b30e36
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/src/data-display/dynamic/dynamic-field/PDynamicField.stories.mdx b/src/data-display/dynamic/dynamic-field/PDynamicField.stories.mdx
@@ -533,7 +533,17 @@ interface MoreOptions extends CommonOptions {
             components: { PDynamicField },
             template: `
             <div>
-                <p-dynamic-field type="more" :options="{
+                <p>field type: more > layout: popup > layout: raw</p>
+                <p-dynamic-field type="more" :options="rawOptions" :data="data" :type-options="typeOptions" />
+                <br><br>
+                <p>field type: more > layout: popup > layout: item</p>
+                <p-dynamic-field type="more" :options="itemOptions" :data="data" :type-options="typeOptions" />
+                <br><br>
+            </div>
+    `,
+            setup() {
+                return {
+                    rawOptions: {
                         sub_key: 'info',
                         layout: {
                             type: 'popup',
@@ -545,12 +555,29 @@ interface MoreOptions extends CommonOptions {
                             }
                         },
                         postfix: '(Jung)'
-                     }" :data="{ id: 'j', name: 'sulmo', info: { weight: '83.5 kg', height: '179.3cm' } }"
-                    :type-options="{ displayKey: 'name' }"
-                ></p-dynamic-field>
-                <br><br>
-            </div>
-    `,
+                    },
+                    itemOptions: {
+                        layout: {
+                            type: 'popup',
+                            options: {
+                                layout: {
+                                    type: 'items',
+                                    options: {
+                                        fields: [
+                                            { key: 'id', label: 'ID', type: 'text' },
+                                            { key: 'name', label: 'Name', type: 'text' },
+                                            { key: 'info', label: 'Info', type: 'dict' }
+                                        ]
+                                    }
+                                }
+                            }
+                        },
+                        postfix: '(Jung)'
+                    },
+                    data: { id: 'j', name: 'sulmo', info: { weight: '83.5 kg', height: '179.3cm' } },
+                    typeOptions: { displayKey: 'name' }
+                }
+            }
         }}
     </Story>
 </Canvas>

diff --git a/src/data-display/dynamic/dynamic-field/templates/more/index.vue b/src/data-display/dynamic/dynamic-field/templates/more/index.vue
@@ -1,6 +1,7 @@
 <template>
     <span class="p-dynamic-field-more">
         <p-dynamic-field type="text"
+                         class="display-data"
                          :data="displayData"
                          :options="nextOptions"
                          @click.native="handleClick"
@@ -94,7 +95,9 @@ export default defineComponent<MoreDynamicFieldProps>({
 
 <style lang="postcss">
 .p-dynamic-field-more {
-    @apply text-blue-700;
-    cursor: pointer;
+    > .display-data {
+        @apply text-blue-700;
+        cursor: pointer;
+    }
 }
 </style>