diff --git a/FieldListing/0355feb3-993a-4ede-9cf2-3d013a8b9936.json b/FieldListing/0355feb3-993a-4ede-9cf2-3d013a8b9936.json new file mode 100644 index 0000000..d50879f --- /dev/null +++ b/FieldListing/0355feb3-993a-4ede-9cf2-3d013a8b9936.json @@ -0,0 +1,74 @@ +{ + "data": { + "meta": { + "adoptsFrom": { + "name": "FieldListing", + "module": "https://realms-staging.stack.cards/catalog/catalog-app/listing/listing" + } + }, + "type": "card", + "attributes": { + "name": "PolymorphicFieldExample with TestField", + "images": [], + "summary": "The TestField component defines a polymorphic custom field used within cards to manage a string value called firstName. It provides multiple variations of its visual representation, including fitted and embedded versions, to adapt to different UI contexts. It serves as a flexible, reusable field type that can be included in other card definitions. The primary purpose of the TestField and its subclasses is to demonstrate customizable, component-based field definitions and their integration within card structures. The PolymorphicFieldExample illustrates how such a field can be embedded within a card, including the ability to dynamically change its subclass, facilitating flexible data modeling and UI rendering within the card system.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "tags.0": { + "links": { + "self": "https://realms-staging.stack.cards/catalog/Tag/51de249c-516a-4c4d-bd88-76e88274c483" + } + }, + "tags.1": { + "links": { + "self": "https://realms-staging.stack.cards/catalog/Tag/b793225c-32f9-404c-b2a9-b4041b93090c" + } + }, + "skills": { + "links": { + "self": null + } + }, + "license": { + "links": { + "self": "https://realms-staging.stack.cards/catalog/License/4c5a023b-a72c-4f90-930b-da60a1de5b2d" + } + }, + "specs.0": { + "links": { + "self": "../Spec/fbacf3b7-2ebe-4448-b873-cba8c0ec2014" + } + }, + "examples": { + "links": { + "self": null + } + }, + "publisher": { + "links": { + "self": null + } + }, + "categories.0": { + "links": { + "self": "https://realms-staging.stack.cards/catalog/Category/developer-tools-code" + } + }, + "categories.1": { + "links": { + "self": "https://realms-staging.stack.cards/catalog/Category/software-development" + } + }, + "cardInfo.theme": { + "links": { + "self": null + } + } + } + } +} \ No newline at end of file diff --git a/Spec/fbacf3b7-2ebe-4448-b873-cba8c0ec2014.json b/Spec/fbacf3b7-2ebe-4448-b873-cba8c0ec2014.json new file mode 100644 index 0000000..93f24de --- /dev/null +++ b/Spec/fbacf3b7-2ebe-4448-b873-cba8c0ec2014.json @@ -0,0 +1,40 @@ +{ + "data": { + "meta": { + "adoptsFrom": { + "name": "Spec", + "module": "https://cardstack.com/base/spec" + } + }, + "type": "card", + "attributes": { + "ref": { + "name": "TestField", + "module": "../polymorphic-field-example" + }, + "readMe": "## Usage as a Field\n\nThe `TestField` spec can be used as a field within a consuming card or field. Here's an example:\n\n```json\n{\n \"data\": {\n \"type\": \"card\",\n \"attributes\": {\n \"firstName\": \"John\"\n },\n \"relationships\": {\n \"specialField\": {\n \"links\": {\n \"self\": \"./TestField\"\n }\n }\n },\n \"meta\": {\n \"adoptsFrom\": {\n \"module\": \"https://realms-staging.stack.cards/chuan16/prospective-scallop/polymorphic-field-example\",\n \"name\": \"TestField\"\n }\n }\n }\n}\n```\n\nIn this example, the `specialField` is using the `TestField` spec.\n\n## Template Usage\n\nTo use the `TestField` spec in a template, you can access its fields like this:\n\n```hbs\n<@fields.specialField @format=\"fitted\" />\n```\n\nThis will render the `fitted` format of the `TestField` spec.\n\n## Summary\n\nThe `TestField` spec is a field definition that can be used within a consuming card or field. It has a `firstName` field of type `StringField`. The spec provides `fitted` and `embedded` formats for rendering the field.\n\n## Import\n\n```gts\nimport { TestField } from 'https://realms-staging.stack.cards/chuan16/prospective-scallop/polymorphic-field-example';\n```", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + }, + "specType": "field", + "cardTitle": "TestField", + "cardDescription": null, + "containedExamples": [] + }, + "relationships": { + "cardInfo.theme": { + "links": { + "self": null + } + }, + "linkedExamples": { + "links": { + "self": null + } + } + } + } +} \ No newline at end of file diff --git a/polymorphic-field-example.gts b/polymorphic-field-example.gts new file mode 100644 index 0000000..e570169 --- /dev/null +++ b/polymorphic-field-example.gts @@ -0,0 +1,99 @@ +import { + Component, + CardDef, + field, + contains, + StringField, + FieldDef, + linksToMany, +} from 'https://cardstack.com/base/card-api'; +import { on } from '@ember/modifier'; + +export class TestField extends FieldDef { + static displayName = 'TestField'; + @field firstName = contains(StringField); + + static fitted = class Fitted extends Component { + + }; + + static embedded = class Embedded extends Component { + + }; +} +export class SubTestField extends TestField { + static displayName = 'SubTestField'; + + static fitted = class Fitted extends Component { + + }; + + static embedded = class Embedded extends Component { + + }; + + static edit = class Edit extends Component { + + }; +} + +export class CardWithSpecialFields extends CardDef { + static displayName = 'CardWithSpecialFields'; + @field specialField = contains(TestField); + + static fitted = class Fitted extends Component { + setSubclass = () => { + this.args.model.specialField = new SubTestField({}); + }; + + }; +} + +export class PolymorphicFieldExample extends CardDef { + static displayName = 'PolymorphicFieldExample'; + @field specialField = contains(TestField); + @field cardsWithSpecialFields = linksToMany(() => CardWithSpecialFields); + + static isolated = class Isolated extends Component { + setSubclass = () => { + this.args.model.specialField = new SubTestField({}); + }; + + }; +}