From f507cc4f957a0b63de80574344ecd64b639373b6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 5 Apr 2024 20:48:11 +0800 Subject: [PATCH] Merge pull request #26751 from storybookjs/fix/disable-vue3-controls Vue: Disable controls for events, slots and expose (cherry picked from commit 166327094b85b8066e00f880556d872028606374) --- .../extractArgTypes.test.ts.snap | 128 +----------------- .../vue3/src/docs/extractArgTypes.ts | 11 +- 2 files changed, 14 insertions(+), 125 deletions(-) diff --git a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap index cbdcb9f51226..164f338725e3 100644 --- a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap +++ b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap @@ -4,7 +4,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for Vue compon { "bar": { "control": { - "disabled": true, + "disable": true, }, "description": "", "name": "bar", @@ -21,7 +21,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for Vue compon }, "baz": { "control": { - "disabled": true, + "disable": true, }, "description": "", "name": "baz", @@ -38,7 +38,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for Vue compon }, "foo": { "control": { - "disabled": true, + "disable": true, }, "description": "", "name": "foo", @@ -60,7 +60,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for component { "bar": { "control": { - "disabled": true, + "disable": true, }, "description": "Test description bar", "name": "bar", @@ -80,7 +80,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for component }, "baz": { "control": { - "disabled": true, + "disable": true, }, "description": "Test description baz", "name": "baz", @@ -103,7 +103,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component { "count": { "control": { - "disabled": true, + "disable": true, }, "description": "a count number", "name": "count", @@ -120,7 +120,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component }, "label": { "control": { - "disabled": true, + "disable": true, }, "description": "a label string", "name": "label", @@ -141,9 +141,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1`] = ` { "array": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description required array object", "name": "array", @@ -170,9 +167,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "arrayOptional": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description optional array object", "name": "arrayOptional", @@ -199,9 +193,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "bar": { - "control": { - "disabled": false, - }, "defaultValue": { "summary": "1", }, @@ -222,9 +213,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "baz": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description baz is required boolean", "name": "baz", @@ -241,9 +229,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "enumValue": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description enum value", "name": "enumValue", @@ -265,9 +250,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "foo": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "@default: "rounded"
@since: v1.0.0
@see: https://vuejs.org/
@deprecated: v1.1.0

string foo", "name": "foo", @@ -284,9 +266,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "inlined": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "", "name": "inlined", @@ -309,9 +288,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "literalFromContext": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description literal type alias that require context", "name": "literalFromContext", @@ -336,9 +312,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "nested": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description nested is required nested object", "name": "nested", @@ -361,9 +334,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "nestedIntersection": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description required nested object with intersection", "name": "nestedIntersection", @@ -390,9 +360,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "nestedOptional": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description optional nested object", "name": "nestedOptional", @@ -431,9 +398,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "recursive": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "", "name": "recursive", @@ -457,9 +421,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "stringArray": { - "control": { - "disabled": false, - }, "defaultValue": { "summary": "["foo", "bar"]", }, @@ -484,9 +445,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "union": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description union is required union type", "name": "union", @@ -513,9 +471,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "unionOptional": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description unionOptional is optional union type", "name": "unionOptional", @@ -551,9 +506,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2`] = ` { "array": { - "control": { - "disabled": false, - }, "description": "description required array object", "name": "array", "table": { @@ -571,9 +523,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "arrayOptional": { - "control": { - "disabled": false, - }, "description": "description optional array object", "name": "arrayOptional", "table": { @@ -591,9 +540,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "bar": { - "control": { - "disabled": false, - }, "description": "description bar is optional number", "name": "bar", "table": { @@ -612,9 +558,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "baz": { - "control": { - "disabled": false, - }, "description": "description baz is required boolean", "name": "baz", "table": { @@ -631,9 +574,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "enumValue": { - "control": { - "disabled": false, - }, "description": "description enum value", "name": "enumValue", "table": { @@ -651,9 +591,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "foo": { - "control": { - "disabled": false, - }, "description": "string foo", "name": "foo", "table": { @@ -670,9 +607,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "inlined": { - "control": { - "disabled": false, - }, "description": undefined, "name": "inlined", "table": { @@ -690,9 +624,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "literalFromContext": { - "control": { - "disabled": false, - }, "description": "description literal type alias that require context", "name": "literalFromContext", "table": { @@ -710,9 +641,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "nested": { - "control": { - "disabled": false, - }, "description": "description nested is required nested object", "name": "nested", "table": { @@ -730,9 +658,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "nestedIntersection": { - "control": { - "disabled": false, - }, "description": "description required nested object with intersection", "name": "nestedIntersection", "table": { @@ -755,9 +680,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "nestedOptional": { - "control": { - "disabled": false, - }, "description": "description optional nested object", "name": "nestedOptional", "table": { @@ -784,9 +706,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "recursive": { - "control": { - "disabled": false, - }, "description": undefined, "name": "recursive", "table": { @@ -804,9 +723,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "stringArray": { - "control": { - "disabled": false, - }, "description": "description stringArray is string array", "name": "stringArray", "table": { @@ -826,9 +742,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "union": { - "control": { - "disabled": false, - }, "description": "description union is required union type", "name": "union", "table": { @@ -853,9 +766,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "unionOptional": { - "control": { - "disabled": false, - }, "description": "description unionOptional is optional union type", "name": "unionOptional", "table": { @@ -888,9 +798,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1`] = ` { "default": { - "control": { - "disabled": false, - }, "description": undefined, "name": "default", "table": { @@ -908,9 +815,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 }, }, "named": { - "control": { - "disabled": false, - }, "description": undefined, "name": "named", "table": { @@ -928,9 +832,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 }, }, "no-bind": { - "control": { - "disabled": false, - }, "description": undefined, "name": "no-bind", "table": { @@ -946,9 +847,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 }, }, "vbind": { - "control": { - "disabled": false, - }, "description": undefined, "name": "vbind", "table": { @@ -971,9 +869,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue component 1`] = ` { "default": { - "control": { - "disabled": false, - }, "description": "", "name": "default", "table": { @@ -988,9 +883,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue co }, }, "named": { - "control": { - "disabled": false, - }, "description": "", "name": "named", "table": { @@ -1005,9 +897,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue co }, }, "no-bind": { - "control": { - "disabled": false, - }, "description": "", "name": "no-bind", "table": { @@ -1022,9 +911,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue co }, }, "vbind": { - "control": { - "disabled": false, - }, "description": "", "name": "vbind", "table": { diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts index 151476491c95..d466cea2e1cd 100644 --- a/code/renderers/vue3/src/docs/extractArgTypes.ts +++ b/code/renderers/vue3/src/docs/extractArgTypes.ts @@ -44,10 +44,13 @@ export const extractArgTypes: ArgTypesExtractor = (component) => { // skip duplicate and global props if (!argType || argTypes[argType.name]) return; - argTypes[argType.name] = { - ...argType, - control: { disabled: !['props', 'slots'].includes(section) }, - }; + // disable controls for events and exposed since they can not be controlled + const sectionsToDisableControls: (typeof section)[] = ['events', 'expose', 'exposed']; + if (sectionsToDisableControls.includes(section)) { + argType.control = { disable: true }; + } + + argTypes[argType.name] = argType; }); });