Fields as Cards

gistfile1.txt

// In this example we show how fields are actually cards, and we customize a field by adopting a string-field card.

{
  data: {
    type: 'cards'
    id: '@acme/ticket-tools::ticket-card:123',
    ... 
  },
  included: [
  
  // This is how we define a field editor, where the currency-field-card has a custom template
  // which is based on a string field
  {
    type: 'cards',
    id: '@acme/ticket-tools::currency-field-card',
    attributes: {
      // Here we are editing the string field card's template to customize it for our price field
      // I'm making lots of assumptions around what it means to set a field in a field card's template
      'editing-template': `
        Price: <input
          type="number" min="0.01" step="0.01"
          value={{get content field}}
          disabled={{disabled}}
          oninput={{action (mut (get content field)) value="target.value"}}
          onblur={{action onchange}}
        >
      `
    },
    relationships: {
      adopts: {
        data: { type: 'cards', id: '@cardstack/core-types::string-field-card' }
      },
    }
  },
  {
    type: 'fields'
    id: '@acme/ticket-tools::ticket-card::price',
    attributes: {
      'is-metadata': true,
      'needed-when-embedded': true, 
    },
    relationships: {
      'field-type': {
        data: { type: 'cards', id: '@acme/ticket-tools::currency-field-card' } // because this card's adopt graph can be traced back to a string, then we know this is a string
      }, 
    }
  }
  ]
}