[{"data":1,"prerenderedAt":1596},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Ffeed-list":489,"\u002Fcomponents\u002Ffeed-list-surround":1591},[4,34,51,317,343,348,353,431],{"title":5,"path":6,"stem":7,"children":8,"package":11,"category":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"category":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"category":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"category":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"category":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"category":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"category":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"category":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"category":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"category":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,66,72,78,84,89,94,99,105,111,116,121,126,131,137,142,147,152,156,161,165,170,175,180,185,190,195,200,204,209,214,219,224,229,234,239,244,249,254,258,262,267,272,277,282,287,292,296,300,304,308,312],{"title":52,"path":54,"stem":58,"package":11,"category":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"category":64,"icon":65},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","Navigation","i-lucide-list-collapse",{"title":67,"path":68,"stem":69,"package":63,"category":70,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","Data Display","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"category":77,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core","Overlay",{"title":79,"path":80,"stem":81,"package":63,"category":82,"icon":83},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","Layout","i-lucide-smartphone",{"title":85,"path":86,"stem":87,"package":63,"category":82,"icon":88},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":90,"path":91,"stem":92,"package":63,"category":70,"icon":93},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":95,"path":96,"stem":97,"package":63,"category":70,"icon":98},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":100,"path":101,"stem":102,"package":63,"category":103,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","Buttons","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"category":109,"icon":110},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","Form","i-lucide-calendar-days",{"title":112,"path":113,"stem":114,"package":63,"category":82,"icon":115},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":117,"path":118,"stem":119,"package":63,"category":109,"icon":120},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":122,"path":123,"stem":124,"package":76,"category":64,"icon":125},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":127,"path":128,"stem":129,"package":76,"category":77,"icon":130},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":132,"path":133,"stem":134,"package":76,"category":135,"icon":136},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","Gestures & Lists","i-lucide-move",{"title":138,"path":139,"stem":140,"package":63,"category":77,"icon":141},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer","i-lucide-panel-bottom",{"title":143,"path":144,"stem":145,"package":63,"category":77,"icon":146},"Dropdown Menu","\u002Fcomponents\u002Fdropdown-menu","3.components\u002Fdropdown-menu","i-lucide-menu",{"title":148,"path":149,"stem":150,"package":63,"category":135,"icon":151},"Feed List","\u002Fcomponents\u002Ffeed-list","3.components\u002Ffeed-list","i-lucide-list",{"title":109,"path":153,"stem":154,"package":63,"category":109,"icon":155},"\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":157,"path":158,"stem":159,"package":63,"category":109,"icon":160},"Form Field","\u002Fcomponents\u002Fform-field","3.components\u002Fform-field","i-lucide-form-input",{"title":162,"path":163,"stem":164,"package":76,"category":70,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":166,"path":167,"stem":168,"package":63,"category":109,"icon":169},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":171,"path":172,"stem":173,"package":63,"category":174,"icon":141},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland","Dynamic Island",{"title":176,"path":177,"stem":178,"package":63,"category":174,"icon":179},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":181,"path":182,"stem":183,"package":63,"category":174,"icon":184},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":186,"path":187,"stem":188,"package":63,"category":11,"icon":189},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":191,"path":192,"stem":193,"package":63,"category":109,"icon":194},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":196,"path":197,"stem":198,"package":63,"category":77,"icon":199},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":64,"path":201,"stem":202,"package":76,"category":64,"icon":203},"\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":205,"path":206,"stem":207,"package":63,"category":109,"icon":208},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":210,"path":211,"stem":212,"package":63,"category":109,"icon":213},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":215,"path":216,"stem":217,"package":63,"category":82,"icon":218},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":220,"path":221,"stem":222,"package":63,"category":77,"icon":223},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":225,"path":226,"stem":227,"package":63,"category":70,"icon":228},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":230,"path":231,"stem":232,"package":63,"category":109,"icon":233},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":235,"path":236,"stem":237,"package":63,"category":109,"icon":238},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":240,"path":241,"stem":242,"package":76,"category":82,"icon":243},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":245,"path":246,"stem":247,"package":63,"category":109,"icon":248},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":250,"path":251,"stem":252,"package":63,"category":82,"icon":253},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":255,"path":256,"stem":257,"package":76,"category":77,"icon":141},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":259,"path":260,"stem":261,"package":63,"category":82,"icon":184},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":263,"path":264,"stem":265,"package":63,"category":109,"icon":266},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":268,"path":269,"stem":270,"package":63,"category":135,"icon":271},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":273,"path":274,"stem":275,"package":63,"category":64,"icon":276},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":278,"path":279,"stem":280,"package":63,"category":135,"icon":281},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":283,"path":284,"stem":285,"package":63,"category":135,"icon":286},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":288,"path":289,"stem":290,"package":63,"category":109,"icon":291},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":293,"path":294,"stem":295,"package":63,"category":64,"icon":184},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":297,"path":298,"stem":299,"package":63,"category":109,"icon":169},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":301,"path":302,"stem":303,"package":63,"category":77,"icon":223},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":305,"path":306,"stem":307,"package":63,"category":109,"icon":291},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":309,"path":310,"stem":311,"package":63,"category":109,"icon":184},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":313,"path":314,"stem":315,"package":63,"category":77,"icon":316},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":318,"path":319,"stem":320,"children":321,"package":11,"category":11,"icon":323},"Theming","\u002Ftheming","4.theming\u002F1.index",[322,324,328,333,338],{"title":318,"path":319,"stem":320,"package":11,"category":11,"icon":323},"i-lucide-palette",{"title":325,"path":326,"stem":327,"package":11,"category":11,"icon":266},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":329,"path":330,"stem":331,"package":11,"category":11,"icon":332},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":334,"path":335,"stem":336,"package":11,"category":11,"icon":337},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":339,"path":340,"stem":341,"package":11,"category":11,"icon":342},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":344,"path":345,"stem":346,"package":11,"category":11,"icon":347},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":349,"path":350,"stem":351,"package":11,"category":11,"icon":352},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":354,"path":355,"stem":356,"children":357,"package":11,"category":11,"icon":359},"Composables","\u002Fcomposables","7.composables\u002F1.index",[358,360,365,370,375,380,384,389,394,399,403,408,412,416,421,426],{"title":354,"path":355,"stem":356,"package":11,"category":11,"icon":359},"i-lucide-square-function",{"title":361,"path":362,"stem":363,"package":11,"category":11,"icon":364},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":366,"path":367,"stem":368,"package":11,"category":11,"icon":369},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":371,"path":372,"stem":373,"package":11,"category":11,"icon":374},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":376,"path":377,"stem":378,"package":11,"category":11,"icon":379},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":381,"path":382,"stem":383,"package":11,"category":11,"icon":83},"useSafeArea","\u002Fcomposables\u002Fuse-safe-area","7.composables\u002F15.use-safe-area",{"title":385,"path":386,"stem":387,"package":11,"category":11,"icon":388},"useGlobalEvent","\u002Fcomposables\u002Fuse-global-event","7.composables\u002F16.use-global-event","i-lucide-radio",{"title":390,"path":391,"stem":392,"package":11,"category":11,"icon":393},"getViewportSize","\u002Fcomposables\u002Fget-viewport-size","7.composables\u002F17.get-viewport-size","i-lucide-scaling",{"title":395,"path":396,"stem":397,"package":11,"category":11,"icon":398},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":400,"path":401,"stem":402,"package":11,"category":11,"icon":337},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":404,"path":405,"stem":406,"package":11,"category":11,"icon":407},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":409,"path":410,"stem":411,"package":11,"category":11,"icon":141},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":413,"path":414,"stem":415,"package":11,"category":11,"icon":352},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":417,"path":418,"stem":419,"package":11,"category":11,"icon":420},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":422,"path":423,"stem":424,"package":11,"category":11,"icon":425},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":427,"path":428,"stem":429,"package":11,"category":11,"icon":430},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":432,"path":433,"stem":434,"children":435,"package":11,"category":11,"icon":437},"Guides","\u002Fguides","8.guides\u002F1.index",[436,438,442,447,451,456,461,466,470,475,479,484],{"title":432,"path":433,"stem":434,"package":11,"category":11,"icon":437},"i-lucide-book-open",{"title":439,"path":440,"stem":441,"package":11,"category":11,"icon":364},"Instant first frame","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":443,"path":444,"stem":445,"package":11,"category":11,"icon":446},"Why Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":448,"path":449,"stem":450,"package":11,"category":11,"icon":22},"Sparkling","\u002Fguides\u002Fsparkling","8.guides\u002F12.sparkling",{"title":452,"path":453,"stem":454,"package":11,"category":11,"icon":455},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":457,"path":458,"stem":459,"package":11,"category":11,"icon":460},"Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":462,"path":463,"stem":464,"package":11,"category":11,"icon":465},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":467,"path":468,"stem":469,"package":11,"category":11,"icon":83},"Testing on device","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":471,"path":472,"stem":473,"package":11,"category":11,"icon":474},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":476,"path":477,"stem":478,"package":11,"category":11,"icon":27},"rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":480,"path":481,"stem":482,"package":11,"category":11,"icon":483},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":485,"path":486,"stem":487,"package":11,"category":11,"icon":488},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":490,"title":148,"body":491,"category":135,"description":1579,"extension":1580,"links":1581,"meta":1587,"navigation":1588,"package":63,"path":149,"seo":1589,"stem":150,"__hash__":1590},"docs\u002F3.components\u002Ffeed-list.md",{"type":492,"value":493,"toc":1563},"minimark",[494,499,522,526,531,1080,1094,1099,1121,1324,1351,1355,1376,1380,1409,1413,1474,1478,1482,1485,1489,1492,1496,1499,1503,1531,1535,1559],[495,496,498],"h2",{"id":497},"overview","Overview",[500,501,502,506,507,510,511,513,514,517,518,521],"p",{},[503,504,505],"code",{},"VyFeedList"," renders a Lynx native ",[503,508,509],{},"\u003Clist>"," through the ",[503,512,41],{}," ",[503,515,516],{},"FeedList"," primitive: rows are virtualized by the platform, and the primitive adds a rubber-band pull-to-refresh, load-more on scroll-to-lower, and optional snap paging. The kit wrapper only adds the base sizing class, so the look of a feed comes from the ",[503,519,520],{},"item"," slot.",[495,523,525],{"id":524},"usage","Usage",[500,527,528,529,521],{},"Give each item a stable key field and render a row in the ",[503,530,520],{},[532,533,538],"pre",{"className":534,"code":535,"language":536,"meta":537,"style":537},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyFeedList } from '@vyui\u002Fkit\u002Ffeed-list'\n\nconst posts = ref([{ id: '1', title: 'First' }, { id: '2', title: 'Second' }])\nconst refreshing = ref(false)\n\nasync function onRefresh() {\n  refreshing.value = true\n  posts.value = await fetchPosts()\n  refreshing.value = false\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cview style=\"height: 640px\">\n    \u003CVyFeedList\n      v-model:refreshing=\"refreshing\"\n      :items=\"posts\"\n      item-key-field=\"id\"\n      enable-refresh\n      @refresh=\"onRefresh\"\n    >\n      \u003Ctemplate #item=\"{ item }\">\n        \u003Cview class=\"p-4 border-b border-default\">\n          \u003Ctext class=\"text-highlighted\">{{ item.title }}\u003C\u002Ftext>\n        \u003C\u002Fview>\n      \u003C\u002Ftemplate>\n    \u003C\u002FVyFeedList>\n  \u003C\u002Fview>\n\u003C\u002Ftemplate>\n","vue","",[503,539,540,575,603,624,631,714,736,741,759,777,798,812,818,828,833,843,866,875,891,906,921,927,942,948,977,999,1031,1041,1051,1061,1071],{"__ignoreMap":537},[541,542,545,549,553,557,560,563,566,570,572],"span",{"class":543,"line":544},"line",1,[541,546,548],{"class":547},"sMK4o","\u003C",[541,550,552],{"class":551},"swJcz","script",[541,554,556],{"class":555},"spNyl"," setup",[541,558,559],{"class":555}," lang",[541,561,562],{"class":547},"=",[541,564,565],{"class":547},"\"",[541,567,569],{"class":568},"sfazB","ts",[541,571,565],{"class":547},[541,573,574],{"class":547},">\n",[541,576,578,582,585,589,592,595,598,600],{"class":543,"line":577},2,[541,579,581],{"class":580},"s7zQu","import",[541,583,584],{"class":547}," {",[541,586,588],{"class":587},"sTEyZ"," ref",[541,590,591],{"class":547}," }",[541,593,594],{"class":580}," from",[541,596,597],{"class":547}," '",[541,599,536],{"class":568},[541,601,602],{"class":547},"'\n",[541,604,606,608,610,613,615,617,619,622],{"class":543,"line":605},3,[541,607,581],{"class":580},[541,609,584],{"class":547},[541,611,612],{"class":587}," VyFeedList",[541,614,591],{"class":547},[541,616,594],{"class":580},[541,618,597],{"class":547},[541,620,621],{"class":568},"@vyui\u002Fkit\u002Ffeed-list",[541,623,602],{"class":547},[541,625,627],{"class":543,"line":626},4,[541,628,630],{"emptyLinePlaceholder":629},true,"\n",[541,632,634,637,640,642,645,648,651,654,657,659,662,665,668,671,673,675,678,680,683,685,687,689,691,694,696,698,700,702,704,707,709,711],{"class":543,"line":633},5,[541,635,636],{"class":555},"const",[541,638,639],{"class":587}," posts ",[541,641,562],{"class":547},[541,643,588],{"class":644},"s2Zo4",[541,646,647],{"class":587},"([",[541,649,650],{"class":547},"{",[541,652,653],{"class":551}," id",[541,655,656],{"class":547},":",[541,658,597],{"class":547},[541,660,661],{"class":568},"1",[541,663,664],{"class":547},"'",[541,666,667],{"class":547},",",[541,669,670],{"class":551}," title",[541,672,656],{"class":547},[541,674,597],{"class":547},[541,676,677],{"class":568},"First",[541,679,664],{"class":547},[541,681,682],{"class":547}," },",[541,684,584],{"class":547},[541,686,653],{"class":551},[541,688,656],{"class":547},[541,690,597],{"class":547},[541,692,693],{"class":568},"2",[541,695,664],{"class":547},[541,697,667],{"class":547},[541,699,670],{"class":551},[541,701,656],{"class":547},[541,703,597],{"class":547},[541,705,706],{"class":568},"Second",[541,708,664],{"class":547},[541,710,591],{"class":547},[541,712,713],{"class":587},"])\n",[541,715,717,719,722,724,726,729,733],{"class":543,"line":716},6,[541,718,636],{"class":555},[541,720,721],{"class":587}," refreshing ",[541,723,562],{"class":547},[541,725,588],{"class":644},[541,727,728],{"class":587},"(",[541,730,732],{"class":731},"sfNiH","false",[541,734,735],{"class":587},")\n",[541,737,739],{"class":543,"line":738},7,[541,740,630],{"emptyLinePlaceholder":629},[541,742,744,747,750,753,756],{"class":543,"line":743},8,[541,745,746],{"class":555},"async",[541,748,749],{"class":555}," function",[541,751,752],{"class":644}," onRefresh",[541,754,755],{"class":547},"()",[541,757,758],{"class":547}," {\n",[541,760,762,765,768,771,774],{"class":543,"line":761},9,[541,763,764],{"class":587},"  refreshing",[541,766,767],{"class":547},".",[541,769,770],{"class":587},"value",[541,772,773],{"class":547}," =",[541,775,776],{"class":731}," true\n",[541,778,780,783,785,787,789,792,795],{"class":543,"line":779},10,[541,781,782],{"class":587},"  posts",[541,784,767],{"class":547},[541,786,770],{"class":587},[541,788,773],{"class":547},[541,790,791],{"class":580}," await",[541,793,794],{"class":644}," fetchPosts",[541,796,797],{"class":551},"()\n",[541,799,801,803,805,807,809],{"class":543,"line":800},11,[541,802,764],{"class":587},[541,804,767],{"class":547},[541,806,770],{"class":587},[541,808,773],{"class":547},[541,810,811],{"class":731}," false\n",[541,813,815],{"class":543,"line":814},12,[541,816,817],{"class":547},"}\n",[541,819,821,824,826],{"class":543,"line":820},13,[541,822,823],{"class":547},"\u003C\u002F",[541,825,552],{"class":551},[541,827,574],{"class":547},[541,829,831],{"class":543,"line":830},14,[541,832,630],{"emptyLinePlaceholder":629},[541,834,836,838,841],{"class":543,"line":835},15,[541,837,548],{"class":547},[541,839,840],{"class":551},"template",[541,842,574],{"class":547},[541,844,846,849,852,855,857,859,862,864],{"class":543,"line":845},16,[541,847,848],{"class":547},"  \u003C",[541,850,851],{"class":551},"view",[541,853,854],{"class":555}," style",[541,856,562],{"class":547},[541,858,565],{"class":547},[541,860,861],{"class":568},"height: 640px",[541,863,565],{"class":547},[541,865,574],{"class":547},[541,867,869,872],{"class":543,"line":868},17,[541,870,871],{"class":547},"    \u003C",[541,873,874],{"class":551},"VyFeedList\n",[541,876,878,881,883,885,888],{"class":543,"line":877},18,[541,879,880],{"class":555},"      v-model:refreshing",[541,882,562],{"class":547},[541,884,565],{"class":547},[541,886,887],{"class":568},"refreshing",[541,889,890],{"class":547},"\"\n",[541,892,894,897,899,901,904],{"class":543,"line":893},19,[541,895,896],{"class":555},"      :items",[541,898,562],{"class":547},[541,900,565],{"class":547},[541,902,903],{"class":568},"posts",[541,905,890],{"class":547},[541,907,909,912,914,916,919],{"class":543,"line":908},20,[541,910,911],{"class":555},"      item-key-field",[541,913,562],{"class":547},[541,915,565],{"class":547},[541,917,918],{"class":568},"id",[541,920,890],{"class":547},[541,922,924],{"class":543,"line":923},21,[541,925,926],{"class":555},"      enable-refresh\n",[541,928,930,933,935,937,940],{"class":543,"line":929},22,[541,931,932],{"class":555},"      @refresh",[541,934,562],{"class":547},[541,936,565],{"class":547},[541,938,939],{"class":568},"onRefresh",[541,941,890],{"class":547},[541,943,945],{"class":543,"line":944},23,[541,946,947],{"class":547},"    >\n",[541,949,951,954,956,959,961,963,965,967,970,973,975],{"class":543,"line":950},24,[541,952,953],{"class":547},"      \u003C",[541,955,840],{"class":551},[541,957,958],{"class":547}," #",[541,960,520],{"class":555},[541,962,562],{"class":547},[541,964,565],{"class":547},[541,966,650],{"class":547},[541,968,969],{"class":587}," item ",[541,971,972],{"class":547},"}",[541,974,565],{"class":547},[541,976,574],{"class":547},[541,978,980,983,985,988,990,992,995,997],{"class":543,"line":979},25,[541,981,982],{"class":547},"        \u003C",[541,984,851],{"class":551},[541,986,987],{"class":555}," class",[541,989,562],{"class":547},[541,991,565],{"class":547},[541,993,994],{"class":568},"p-4 border-b border-default",[541,996,565],{"class":547},[541,998,574],{"class":547},[541,1000,1002,1005,1008,1010,1012,1014,1017,1019,1022,1025,1027,1029],{"class":543,"line":1001},26,[541,1003,1004],{"class":547},"          \u003C",[541,1006,1007],{"class":551},"text",[541,1009,987],{"class":555},[541,1011,562],{"class":547},[541,1013,565],{"class":547},[541,1015,1016],{"class":568},"text-highlighted",[541,1018,565],{"class":547},[541,1020,1021],{"class":547},">",[541,1023,1024],{"class":587},"{{ item.title }}",[541,1026,823],{"class":547},[541,1028,1007],{"class":551},[541,1030,574],{"class":547},[541,1032,1034,1037,1039],{"class":543,"line":1033},27,[541,1035,1036],{"class":547},"        \u003C\u002F",[541,1038,851],{"class":551},[541,1040,574],{"class":547},[541,1042,1044,1047,1049],{"class":543,"line":1043},28,[541,1045,1046],{"class":547},"      \u003C\u002F",[541,1048,840],{"class":551},[541,1050,574],{"class":547},[541,1052,1054,1057,1059],{"class":543,"line":1053},29,[541,1055,1056],{"class":547},"    \u003C\u002F",[541,1058,505],{"class":551},[541,1060,574],{"class":547},[541,1062,1064,1067,1069],{"class":543,"line":1063},30,[541,1065,1066],{"class":547},"  \u003C\u002F",[541,1068,851],{"class":551},[541,1070,574],{"class":547},[541,1072,1074,1076,1078],{"class":543,"line":1073},31,[541,1075,823],{"class":547},[541,1077,840],{"class":551},[541,1079,574],{"class":547},[500,1081,1082,1083,1085,1086,1089,1090,1093],{},"The list must sit in a box with a definite height. A native ",[503,1084,509],{}," inside a ",[503,1087,1088],{},"flex-1 min-h-0"," parent measures ",[503,1091,1092],{},"0px"," and renders nothing — measure the container and pass pixels.",[1095,1096,1098],"h3",{"id":1097},"pull-to-refresh","Pull to refresh",[500,1100,1101,1104,1105,1108,1109,1112,1113,1116,1117,1120],{},[503,1102,1103],{},"enableRefresh"," turns on the gesture; ",[503,1106,1107],{},"refresh"," fires once when the pull passes ",[503,1110,1111],{},"refreshThreshold"," and the finger lifts. Bind ",[503,1114,1115],{},"v-model:refreshing"," so the spinner clears when the fetch resolves, and use the ",[503,1118,1119],{},"refreshHeader"," slot to draw the pull state yourself.",[532,1122,1124],{"className":534,"code":1123,"language":536,"meta":537,"style":537},"\u003Ctemplate>\n  \u003CVyFeedList v-model:refreshing=\"refreshing\" :items=\"posts\" enable-refresh @refresh=\"onRefresh\">\n    \u003Ctemplate #refreshHeader=\"{ state, progress }\">\n      \u003Cview class=\"h-16 items-center justify-center\">\n        \u003Ctext class=\"text-muted\">\n          {{ state === 'refreshing' ? 'Refreshing…' : progress >= 1 ? 'Release to refresh' : 'Pull to refresh' }}\n        \u003C\u002Ftext>\n      \u003C\u002Fview>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #item=\"{ item }\">…\u003C\u002Ftemplate>\n  \u003C\u002FVyFeedList>\n\u003C\u002Ftemplate>\n",[503,1125,1126,1134,1178,1208,1227,1246,1251,1259,1267,1275,1308,1316],{"__ignoreMap":537},[541,1127,1128,1130,1132],{"class":543,"line":544},[541,1129,548],{"class":547},[541,1131,840],{"class":551},[541,1133,574],{"class":547},[541,1135,1136,1138,1140,1143,1145,1147,1149,1151,1154,1156,1158,1160,1162,1165,1168,1170,1172,1174,1176],{"class":543,"line":577},[541,1137,848],{"class":547},[541,1139,505],{"class":551},[541,1141,1142],{"class":555}," v-model:refreshing",[541,1144,562],{"class":547},[541,1146,565],{"class":547},[541,1148,887],{"class":568},[541,1150,565],{"class":547},[541,1152,1153],{"class":555}," :items",[541,1155,562],{"class":547},[541,1157,565],{"class":547},[541,1159,903],{"class":568},[541,1161,565],{"class":547},[541,1163,1164],{"class":555}," enable-refresh",[541,1166,1167],{"class":555}," @refresh",[541,1169,562],{"class":547},[541,1171,565],{"class":547},[541,1173,939],{"class":568},[541,1175,565],{"class":547},[541,1177,574],{"class":547},[541,1179,1180,1182,1184,1186,1188,1190,1192,1194,1197,1199,1202,1204,1206],{"class":543,"line":605},[541,1181,871],{"class":547},[541,1183,840],{"class":551},[541,1185,958],{"class":547},[541,1187,1119],{"class":555},[541,1189,562],{"class":547},[541,1191,565],{"class":547},[541,1193,650],{"class":547},[541,1195,1196],{"class":587}," state",[541,1198,667],{"class":547},[541,1200,1201],{"class":587}," progress ",[541,1203,972],{"class":547},[541,1205,565],{"class":547},[541,1207,574],{"class":547},[541,1209,1210,1212,1214,1216,1218,1220,1223,1225],{"class":543,"line":626},[541,1211,953],{"class":547},[541,1213,851],{"class":551},[541,1215,987],{"class":555},[541,1217,562],{"class":547},[541,1219,565],{"class":547},[541,1221,1222],{"class":568},"h-16 items-center justify-center",[541,1224,565],{"class":547},[541,1226,574],{"class":547},[541,1228,1229,1231,1233,1235,1237,1239,1242,1244],{"class":543,"line":633},[541,1230,982],{"class":547},[541,1232,1007],{"class":551},[541,1234,987],{"class":555},[541,1236,562],{"class":547},[541,1238,565],{"class":547},[541,1240,1241],{"class":568},"text-muted",[541,1243,565],{"class":547},[541,1245,574],{"class":547},[541,1247,1248],{"class":543,"line":716},[541,1249,1250],{"class":587},"          {{ state === 'refreshing' ? 'Refreshing…' : progress >= 1 ? 'Release to refresh' : 'Pull to refresh' }}\n",[541,1252,1253,1255,1257],{"class":543,"line":738},[541,1254,1036],{"class":547},[541,1256,1007],{"class":551},[541,1258,574],{"class":547},[541,1260,1261,1263,1265],{"class":543,"line":743},[541,1262,1046],{"class":547},[541,1264,851],{"class":551},[541,1266,574],{"class":547},[541,1268,1269,1271,1273],{"class":543,"line":761},[541,1270,1056],{"class":547},[541,1272,840],{"class":551},[541,1274,574],{"class":547},[541,1276,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1302,1304,1306],{"class":543,"line":779},[541,1278,871],{"class":547},[541,1280,840],{"class":551},[541,1282,958],{"class":547},[541,1284,520],{"class":555},[541,1286,562],{"class":547},[541,1288,565],{"class":547},[541,1290,650],{"class":547},[541,1292,969],{"class":587},[541,1294,972],{"class":547},[541,1296,565],{"class":547},[541,1298,1021],{"class":547},[541,1300,1301],{"class":587},"…",[541,1303,823],{"class":547},[541,1305,840],{"class":551},[541,1307,574],{"class":547},[541,1309,1310,1312,1314],{"class":543,"line":800},[541,1311,1066],{"class":547},[541,1313,505],{"class":551},[541,1315,574],{"class":547},[541,1317,1318,1320,1322],{"class":543,"line":814},[541,1319,823],{"class":547},[541,1321,840],{"class":551},[541,1323,574],{"class":547},[500,1325,1326,1329,1330,1333,1334,1333,1337,1333,1340,1342,1343,1346,1347,1350],{},[503,1327,1328],{},"state"," moves through ",[503,1331,1332],{},"idle",", ",[503,1335,1336],{},"pulling",[503,1338,1339],{},"releaseReady",[503,1341,887],{},", and ",[503,1344,1345],{},"done","; ",[503,1348,1349],{},"progress"," is the pull distance as a fraction of the threshold.",[1095,1352,1354],{"id":1353},"load-more","Load more",[500,1356,1357,1360,1361,1364,1365,1368,1369,1372,1373,521],{},[503,1358,1359],{},"enableLoadMore"," emits ",[503,1362,1363],{},"loadMore"," when scrolling comes within ",[503,1366,1367],{},"loadMoreThresholdItemCount"," rows of the bottom. Set ",[503,1370,1371],{},"noMoreData"," once the last page has arrived to stop it and show the ",[503,1374,1375],{},"noMoreDataFooter",[1095,1377,1379],{"id":1378},"grids-and-paging","Grids and paging",[500,1381,1382,1385,1386,1389,1390,1393,1394,1397,1398,1401,1402,1405,1406,767],{},[503,1383,1384],{},"listType: 'flow'"," or ",[503,1387,1388],{},"'waterfall'"," with ",[503,1391,1392],{},"spanCount"," greater than 1 renders columns instead of rows. ",[503,1395,1396],{},"itemSnap"," snaps each item to a rest position after a scroll — ",[503,1399,1400],{},"true"," gives full-screen paging, and ",[503,1403,1404],{},"snap"," reports the settled index in ",[503,1407,1408],{},"event.detail.position",[495,1410,1412],{"id":1411},"features-and-behavior","Features and behavior",[1414,1415,1416,1431,1437,1443,1454,1460],"ul",{},[1417,1418,1419,1422,1423,1426,1427,1430],"li",{},[503,1420,1421],{},"itemKeyField"," (default ",[503,1424,1425],{},"'id'",") or ",[503,1428,1429],{},"itemKey"," must produce a stable, unique key per row. The native diff appends and removes by key but does not reorder, so replace keys when the data order changes rather than permuting them.",[1417,1432,1433,1436],{},[503,1434,1435],{},"enableBounce"," adds rubber-band overscroll at both edges, independent of refresh.",[1417,1438,1439,1442],{},[503,1440,1441],{},"disabled"," stops scrolling and refresh interactions.",[1417,1444,1445,1446,1449,1450,1453],{},"The ",[503,1447,1448],{},"empty"," slot replaces the list when ",[503,1451,1452],{},"items"," is empty.",[1417,1455,1456,1459],{},[503,1457,1458],{},"bounces"," is ignored while pull-to-refresh is on: the native bounce is forced off so the top-edge pull is not stolen from the gesture.",[1417,1461,1462,1463,1466,1467,1470,1471,1473],{},"The kit wrapper does not forward the core's ",[503,1464,1465],{},"loadingMore"," model, so the ",[503,1468,1469],{},"loadMoreFooter"," slot never renders through it. Use the core ",[503,1472,516],{}," when a loading footer matters.",[495,1475,1477],{"id":1476},"api","API",[1095,1479,1481],{"id":1480},"props","Props",[1483,1484],"component-props",{"name":516},[1095,1486,1488],{"id":1487},"emits","Emits",[1490,1491],"component-emits",{"name":516},[1095,1493,1495],{"id":1494},"slots","Slots",[1497,1498],"component-slots",{"name":516},[495,1500,1502],{"id":1501},"platform-notes","Platform notes",[1414,1504,1505,1512,1515,1528],{},[1417,1506,1507,1508,1511],{},"Pull-to-refresh runs on ",[503,1509,1510],{},":main-thread-bindtouch*"," worklets and only takes the gesture while pulling down from the top edge, so it does not fight native scrolling.",[1417,1513,1514],{},"Rows are virtualized by the platform. Keep row templates cheap; anything measured per row runs during scrolling.",[1417,1516,1517,1518,1520,1521,1523,1524,1527],{},"A shrinking ",[503,1519,1452],{}," array needs a Vue-Lynx whose ",[503,1522,509],{}," bridge applies removals. Stock releases only append, which leaves ghost rows and a duplicate ",[503,1525,1526],{},"item-key"," crash on the next append.",[1417,1529,1530],{},"Desktop web has no synthesized touch, so the pull also binds mouse events; it engages only at the top edge and leaves ordinary wheel scrolling alone.",[495,1532,1534],{"id":1533},"related-components","Related components",[1414,1536,1537,1545,1552],{},[1417,1538,1539,1544],{},[1540,1541,1542],"a",{"href":241},[503,1543,240],{}," for non-virtualized scrolling with edge thresholds.",[1417,1546,1547,1551],{},[1540,1548,1549],{"href":284},[503,1550,283],{}," for paged horizontal content.",[1417,1553,1554,1558],{},[1540,1555,1556],{"href":279},[503,1557,278],{}," for per-row swipe controls.",[1560,1561,1562],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":537,"searchDepth":544,"depth":577,"links":1564},[1565,1566,1571,1572,1577,1578],{"id":497,"depth":577,"text":498},{"id":524,"depth":577,"text":525,"children":1567},[1568,1569,1570],{"id":1097,"depth":605,"text":1098},{"id":1353,"depth":605,"text":1354},{"id":1378,"depth":605,"text":1379},{"id":1411,"depth":577,"text":1412},{"id":1476,"depth":577,"text":1477,"children":1573},[1574,1575,1576],{"id":1480,"depth":605,"text":1481},{"id":1487,"depth":605,"text":1488},{"id":1494,"depth":605,"text":1495},{"id":1501,"depth":577,"text":1502},{"id":1533,"depth":577,"text":1534},"Virtualized native list with pull-to-refresh, load-more, and snap paging.","md",[1582],{"label":1583,"icon":1584,"to":1585,"target":1586},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FFeedList.vue","_blank",{},{"icon":151},{"title":148,"description":1579},"3T_RKGGfKatraO5ZqsSD8WUbrbJZksDjBc0RGTrxrfY",[1592,1594],{"title":143,"path":144,"stem":145,"description":1593,"icon":-1,"children":-1,"navigation":-1},"A menu of actions anchored to the element that opens it.",{"title":109,"path":153,"stem":154,"description":1595,"icon":-1,"children":-1,"navigation":-1},"A form container that tracks values, runs validators, and emits submit.",1789821811012]