[nextgen/cardstack] add slot support to components

- migrate existing code to slots
- add interactiveComponent.activeColor to overwrite the default "selected" button style
- improve handling of cached components
This commit is contained in:
bignutty 2025-02-21 15:09:04 +01:00
parent e2c8a368c6
commit 668bb946a7
5 changed files with 173 additions and 88 deletions

View file

@ -2,7 +2,7 @@ const { createEmbed, page } = require("#utils/embed");
const { acknowledge } = require("#utils/interactions");
const {createDynamicCardStack} = require("#cardstack/index");
const {ResolveCallbackTypes} = require("#cardstack/constants");
const {ResolveCallbackTypes, InteractiveComponentTypes} = require("#cardstack/constants");
module.exports = {
label: "text",
@ -31,8 +31,83 @@ module.exports = {
},
interactive: {
always_active_button: {
type: InteractiveComponentTypes.BUTTON,
label: "single sub page",
slot: 1,
visible: true,
disableCache: true,
resolvePage: ()=>{
return {
type: ResolveCallbackTypes.SUBSTACK,
cards: [
createEmbed("success", context, "smiley")
].map((p)=>page(p))
}
}
},
always_active_button1: {
type: InteractiveComponentTypes.BUTTON,
label: "single sub page",
slot: 1,
visible: true,
disableCache: true,
resolvePage: ()=>{
return {
type: ResolveCallbackTypes.SUBSTACK,
cards: [
createEmbed("success", context, "smiley")
].map((p)=>page(p))
}
}
},
always_active_button2: {
type: InteractiveComponentTypes.BUTTON,
label: "single sub page",
slot: 1,
visible: true,
disableCache: true,
resolvePage: ()=>{
return {
type: ResolveCallbackTypes.SUBSTACK,
cards: [
createEmbed("success", context, "smiley")
].map((p)=>page(p))
}
}
},
always_active_button3: {
type: InteractiveComponentTypes.BUTTON,
label: "single sub page",
slot: 1,
visible: true,
disableCache: true,
resolvePage: ()=>{
return {
type: ResolveCallbackTypes.SUBSTACK,
cards: [
createEmbed("success", context, "smiley")
].map((p)=>page(p))
}
}
},
always_active_button4: {
type: InteractiveComponentTypes.BUTTON,
label: "single sub page",
slot: 1,
visible: true,
disableCache: true,
resolvePage: ()=>{
return {
type: ResolveCallbackTypes.SUBSTACK,
cards: [
createEmbed("success", context, "smiley")
].map((p)=>page(p))
}
}
},
always_active_button5: {
type: InteractiveComponentTypes.BUTTON,
label: "single sub page",
inline: true,
visible: true,
disableCache: true,
resolvePage: ()=>{
@ -45,10 +120,9 @@ module.exports = {
}
},
conditional_button: {
type: InteractiveComponentTypes.BUTTON,
// Button Label
label: "Conditional",
// Next to pagination or new row
inline: false,
visible: (page) => {
return (page.getState("key") === "t_1")
},
@ -63,6 +137,8 @@ module.exports = {
}
},
dynamic_button: {
type: InteractiveComponentTypes.BUTTON,
slot: 3,
// Button Label
label: (page) => {
console.log(page.getState("key"))