Extract js code from x-data

examples/pages/combobox/basic.html

@@ -1,26 +1,32 @@
-<template x-component:page="combobox-basic" x-import="hui/combobox" x-data="{
+<script>
+ function setupComboboxBasicData() {
+ const everybody = [
+ { id: 1, name: 'Wade Cooper' },
+ { id: 2, name: 'Arlene Mccoy' },
+ { id: 3, name: 'Devon Webb' },
+ { id: 4, name: 'Tom Cook' },
+ { id: 5, name: 'Tanya Fox' },
+ { id: 6, name: 'Hellen Schmidt' },
+ { id: 7, name: 'Caroline Schultz' },
+ { id: 8, name: 'Mason Heaney' },
+ { id: 9, name: 'Claudie Smitham' },
+ { id: 10, name: 'Emil Schaefer' }
+ ]
+ return {
  query: '',
- activePerson: null,
- everybody: [
- { id: 1, name: 'Wade Cooper' },
- { id: 2, name: 'Arlene Mccoy' },
- { id: 3, name: 'Devon Webb' },
- { id: 4, name: 'Tom Cook' },
- { id: 5, name: 'Tanya Fox' },
- { id: 6, name: 'Hellen Schmidt' },
- { id: 7, name: 'Caroline Schultz' },
- { id: 8, name: 'Mason Heaney' },
- { id: 9, name: 'Claudie Smitham' },
- { id: 10, name: 'Emil Schaefer' }
- ],
+ activePerson: everybody[1],
+ everybody,
  get filteredPeople() {
  return this.query === ''
  ? this.everybody
  : this.everybody.filter((person) => {
  return person.name.toLowerCase().includes(this.query.toLowerCase())
  })
  }
- }">
+ }
+ }
+</script>
+<template x-component:page="combobox-basic" x-import="hui/combobox" x-data="setupComboboxBasicData()">
  <div class="flex flex-col h-full overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
  <main class="flex-1 overflow-auto bg-gray-50">
  <div class="flex justify-center bg-gray-50 p-12">

examples/pages/listbox/basic.html

@@ -1,21 +1,24 @@
-
-
-<template x-component:page="listbox-basic" x-import="hui/listbox" class="p-2" x-data="{
- people : [
- { id: 1, name: 'Wade Cooper' },
- { id: 2, name: 'Arlene Mccoy' },
- { id: 3, name: 'Devon Webb' },
- { id: 4, name: 'Tom Cook' },
- { id: 5, name: 'Tanya Fox', disabled: true },
- { id: 6, name: 'Hellen Schmidt' },
- { id: 7, name: 'Caroline Schultz' },
- { id: 8, name: 'Mason Heaney', disabled: true },
- { id: 9, name: 'Claudie Smitham' },
- { id: 10, name: 'Emil Schaefer' },
-],
- active : null
-}">
-
+<script>
+ function setupListboxBasicData() {
+ const people = [
+ { id: 1, name: 'Wade Cooper' },
+ { id: 2, name: 'Arlene Mccoy' },
+ { id: 3, name: 'Devon Webb' },
+ { id: 4, name: 'Tom Cook' },
+ { id: 5, name: 'Tanya Fox', disabled: true },
+ { id: 6, name: 'Hellen Schmidt' },
+ { id: 7, name: 'Caroline Schultz' },
+ { id: 8, name: 'Mason Heaney', disabled: true },
+ { id: 9, name: 'Claudie Smitham' },
+ { id: 10, name: 'Emil Schaefer' },
+ ]
+ return {
+ people,
+ active: people[1]
+ }
+ }
+</script>
+<template x-component:page="listbox-basic" x-import="hui/listbox" class="p-2" x-data="setupListboxBasicData()">
  <div class="flex h-full justify-center bg-gray-50 p-12">
  <div class="mx-auto w-full max-w-xs">
  <div class="space-y-1">

examples/pages/listbox/multi.html

@@ -1,22 +1,27 @@
-<template x-component:page="listbox-multi" x-import="hui/listbox" class="p-2" x-data="
-{
- people : [
- { id: 1, name: 'Wade Cooper' },
- { id: 2, name: 'Arlene Mccoy' },
- { id: 3, name: 'Devon Webb' },
- { id: 4, name: 'Tom Cook' },
- { id: 5, name: 'Tanya Fox', disabled: true },
- { id: 6, name: 'Hellen Schmidt' },
- { id: 7, name: 'Caroline Schultz' },
- { id: 8, name: 'Mason Heaney', disabled: true },
- { id: 9, name: 'Claudie Smitham' },
- { id: 10, name: 'Emil Schaefer' },
-],
- activePersons: [],
- removePerson(toRemove) {
- this.activePersons = this.activePersons.filter((p) => p !== toRemove)
+<script>
+ function setupListboxMultiData() {
+ const people = [
+ { id: 1, name: 'Wade Cooper' },
+ { id: 2, name: 'Arlene Mccoy' },
+ { id: 3, name: 'Devon Webb' },
+ { id: 4, name: 'Tom Cook' },
+ { id: 5, name: 'Tanya Fox', disabled: true },
+ { id: 6, name: 'Hellen Schmidt' },
+ { id: 7, name: 'Caroline Schultz' },
+ { id: 8, name: 'Mason Heaney', disabled: true },
+ { id: 9, name: 'Claudie Smitham' },
+ { id: 10, name: 'Emil Schaefer' },
+ ]
+ return {
+ people,
+ activePersons: [],
+ removePerson(toRemove) {
+ this.activePersons = this.activePersons.filter((p) => p !== toRemove)
+ }
+ }
  }
-}">
+</script>
+<template x-component:page="listbox-multi" x-import="hui/listbox" class="p-2" x-data="setupListboxMultiData()">
  <div class="flex h-full justify-center space-x-4 bg-gray-50 p-12">
  <div class="w-full max-w-4xl">
  <div class="space-y-1">

examples/pages/radio-group/basic.html

@@ -1,23 +1,29 @@
-<template x-component:page="radio-group-basic" x-import="hui/radio-group" x-data="{
- active: 'access-2',
- access: [
- {
- id: 'access-1',
- name: 'Public access',
- description: 'This project would be available to anyone who has the link',
- },
- {
- id: 'access-2',
- name: 'Private to Project Members',
- description: 'Only members of this project would be able to access',
- },
- {
- id: 'access-3',
- name: 'Private to you',
- description: 'You are the only one able to access this project',
- },
- ]
- }">
+<script>
+ function setupRadioGroupBasicData() {
+ const access = [
+ {
+ id: 'access-1',
+ name: 'Public access',
+ description: 'This project would be available to anyone who has the link',
+ },
+ {
+ id: 'access-2',
+ name: 'Private to Project Members',
+ description: 'Only members of this project would be able to access',
+ },
+ {
+ id: 'access-3',
+ name: 'Private to you',
+ description: 'You are the only one able to access this project',
+ },
+ ]
+ return {
+ active: access[1].id,
+ access
+ }
+ }
+</script>
+<template x-component:page="radio-group-basic" x-import="hui/radio-group" x-data="setupRadioGroupBasicData()">
 
  <div class="max-w-xl p-12 h-full">
  <a href="/">Link before</a>

examples/pages/tabs/basic.html

@@ -1,14 +1,20 @@
+<script>
+ function setupTabsBasicData() {
+ const tabs = [
+ { name: 'My Account', content: 'Tab content for my account' },
+ { name: 'Company', content: 'Tab content for company', disabled: true },
+ { name: 'Team Members', content: 'Tab content for team members' },
+ { name: 'Billing', content: 'Tab content for billing' },
+ ]
+ return {
+ manual: false,
+ selectedTab: tabs[0].name,
+ tabs,
+ }
+ }
 
-<template x-component:page="tabs-basic" x-import="hui/tabs,switch" x-data="{
- manual: false,
- selectedTab: 'My Account',
- tabs: [
- { name: 'My Account', content: 'Tab content for my account' },
- { name: 'Company', content: 'Tab content for company', disabled: true },
- { name: 'Team Members', content: 'Tab content for team members' },
- { name: 'Billing', content: 'Tab content for billing' },
- ]
-}">
+</script>
+<template x-component:page="tabs-basic" x-import="hui/tabs,switch" x-data="setupTabsBasicData()">
  <div class="flex flex-col h-full items-start space-y-12 bg-gray-50 p-12">
  <hui-switch-group as="div" class="flex items-center space-x-4">
  <hui-switch-label>Manual keyboard activation</hui-switch-label>