more eslint rules

.vscode/settings.json

@@ -25,9 +25,8 @@
     "editor.formatOnSave": true
   },
   "[vue]": {
-    // Vue files are ignored in Prettier. Some formatting **will** be applied
-    // on save by ESLint (via `editor.codeActionsOnSave` settings above)
-    "editor.formatOnSave": false
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
   },
   // This corresponds to the `lib` we're using everywhere. Setting it here
   // helps to address editor-only type errors in tooling files, where VSCode

eslint.config.js

@@ -394,6 +394,9 @@ export default tseslint.config(
 			// should be based on the printWidth
 			'vue/max-attributes-per-line': 'off',
 			'vue/no-undef-components': 'error',
+			'vue/html-comment-indent': ['error', 'tab'],
+			'vue/script-indent': ['error', 'tab'],
+			'vue/no-empty-component-block': 'error',
 		},
 	},
 

packages/ui-vue/src/App.vue

@@ -27,26 +27,21 @@ onErrorCaptured((error) => {
 });
 
 const formFixtureGlobImports = import.meta.glob<true, 'raw', string>('../../ui-solid/fixtures/xforms/**/*.xml', {
-    query: '?raw',
-    import: 'default',
-    eager: true,
+	query: '?raw',
+	import: 'default',
+	eager: true,
 });
 const demoForms = Object.entries(formFixtureGlobImports);
 
 demoForms.forEach(f => {
-    f[0] = f[0].replace('../../ui-solid/fixtures/xforms/', '')
+	f[0] = f[0].replace('../../ui-solid/fixtures/xforms/', '')
 })
 
 
 const selectForm = ref<[string, string] | null>(null);
 
 const handleSubmit = (data: string) => {
-    alert(`Submit button was pressed. Data: ${data}`); // eslint-disable-line no-undef -- alert is defined globally
+	alert(`Submit button was pressed. Data: ${data}`); // eslint-disable-line no-undef -- alert is defined globally
 } 
 
 </script>
-
-
-<style>
-
-</style>

packages/ui-vue/src/components/OdkControlLabel.vue

@@ -6,7 +6,3 @@
 import type { AnyLeafNode } from '@odk-web-forms/xforms-engine';
 const props = defineProps<{question: AnyLeafNode}>();
 </script>
-
-<style scoped>
-
-</style>

packages/ui-vue/src/components/OdkForm.vue

@@ -41,13 +41,13 @@ const odkForm = ref<RootNode>();
 const emit = defineEmits(['submit']);
 
 initializeForm(props.formXml, {
-    config: {
-      stateFactory: reactive
-    },
-  }).then((f) => {
-    odkForm.value = f;
-		// TODO/sk: remove once dust settles
-		// eslint-disable-next-line -- temporary code
+	config: {
+		stateFactory: reactive
+	},
+}).then((f) => {
+	odkForm.value = f;
+	// TODO/sk: remove once dust settles
+	// eslint-disable-next-line -- temporary code
 		console.log((f as any).childrenState.getChildren()); 
   }).catch(() => {}); // eslint-disable-line -- noop
 
@@ -57,7 +57,3 @@ const handleSubmit = () => {
 	emit('submit', (odkForm as any).value.contextNode.outerHTML); // eslint-disable-line
 }
 </script>
-
-<style>
-
-</style>

packages/ui-vue/src/components/OdkGroup.vue

@@ -13,7 +13,3 @@ defineProps<{ question: GroupNode }>();
 
 
 </script>
-
-<style scoped>
-
-</style>

packages/ui-vue/src/components/OdkPanel.vue

@@ -37,8 +37,8 @@ const props = withDefaults(defineProps<{title?: string, menuItems?: MenuItem[],
 });
 
 const panelClass = computed(() => [
-  'with-title',
-  props.menuItems && props.menuItems.length > 0 ? 'with-context-menu' : 'no-context-menu',
+	'with-title',
+	props.menuItems && props.menuItems.length > 0 ? 'with-context-menu' : 'no-context-menu',
 	props.class
 ]);
 
@@ -51,7 +51,7 @@ const toggle = () => {
 const menu = ref<Menu & MenuState>();
 
 const toggleMenu = (event:  Event) => {
-    menu.value?.toggle(event);
+	menu.value?.toggle(event);
 };
 
 </script>

packages/ui-vue/src/components/OdkQuestionList.vue

@@ -27,7 +27,3 @@ const isRepeatRangeNode = (n: GeneralChildNode) : n is RepeatRangeNode => n.defi
 
 
 </script>
-
-<style scoped>
-
-</style>

packages/ui-vue/src/components/OdkRepeat.vue

@@ -19,8 +19,4 @@ const props = defineProps<{ question: RepeatRangeNode}>();
 
 const label = computed(() => props.question.currentState.label?.asString);
 
-</script>
-
-<style scoped>
-
-</style>
+</script>

packages/ui-vue/src/components/OdkRepeatInstance.vue

@@ -17,24 +17,24 @@ const emit = defineEmits(['remove']);
 
 const isGroup = (child: GeneralChildNode) => {
 	return (
-			child.definition.bodyElement?.type === 'logical-group' ||
-			 child.definition.bodyElement?.type === 'presentation-group'
-		);	
+		child.definition.bodyElement?.type === 'logical-group' ||
+		child.definition.bodyElement?.type === 'presentation-group'
+	);	
 }
 
 const label = computed(() => {
 	// It has just one child and that is a group with label
 	// then we use label of that group
-  if( props.instance.currentState.children.length === 1 && 
-			isGroup(props.instance.currentState.children[0]) && 
-			props.instance.currentState.children[0].currentState.label
+	if( props.instance.currentState.children.length === 1 && 
+		isGroup(props.instance.currentState.children[0]) && 
+		props.instance.currentState.children[0].currentState.label
 	) {
 		return props.instance.currentState.children[0].currentState.label?.asString
 	}
 
 	// Use RepeatRangeNode label if it's there
 	// TODO/sk: use state.label.asString
-  if(props.instance.parent.definition.bodyElement.label?.children[0]?.stringValue){
+	if(props.instance.parent.definition.bodyElement.label?.children[0]?.stringValue){
 		return `${props.instance.parent.definition.bodyElement.label?.children[0].stringValue} ${props.instanceIndex + 1}`;
 	}
 
@@ -44,7 +44,7 @@ const label = computed(() => {
 const children = computed(() => {
 	// It has just one child and that is a group
 	// then we use its children - essentially coalesce RepeatInstance and Group into one.
-  if(props.instance.currentState.children.length === 1 && isGroup(props.instance.currentState.children[0])){
+	if(props.instance.currentState.children.length === 1 && isGroup(props.instance.currentState.children[0])){
 		return (props.instance.currentState.children[0] as GroupNode).currentState.children;
 	}
 	else{
@@ -56,8 +56,4 @@ const menuItems: MenuItem[] = [
 	{label: 'Remove', icon: 'icon-delete', command: () => emit("remove")}
 ];
 
-</script>
-
-<style scoped>
-
-</style>
+</script>

packages/ui-vue/src/components/controls/InputText.vue

@@ -23,7 +23,3 @@ const setValue = (e:Event) => {
 }
 
 </script>
-
-<style scoped>
-
-</style>

packages/ui-vue/src/components/controls/UnsupportedControl.vue

@@ -12,8 +12,4 @@ defineProps<{question: AnyLeafNode}>();
 const isDev = () => {
 	return import.meta.env.DEV;
 }
-</script>
-
-<style scoped>
-
-</style>
+</script>