refactor: streamline imports and enhance component structure across various controls

Author: tacxou

src/controls/autocomplete.vue

@@ -48,26 +48,22 @@
 </template>
 
 <script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
-  and,
-  hasOption,
-  or,
-  isEnumControl,
-} from '@jsonforms/core'
+import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl, and, hasOption } from '@jsonforms/core'
 import { defineComponent } from 'vue'
 import { rendererProps, RendererProps, useJsonFormsEnumControl } from '@jsonforms/vue'
 import { ControlWrapper } from '../common'
 import { determineClearValue } from '../utils'
 import { useAutocompleteControl } from '../composables'
+import { QItem, QItemLabel, QItemSection, QSelect } from 'quasar'
 
 const controlRenderer = defineComponent({
   name: 'SuggestionControlRenderer',
   components: {
     ControlWrapper,
+    QSelect,
+    QItem,
+    QItemSection,
+    QItemLabel,
   },
   props: {
     ...rendererProps<ControlElement>(),

src/controls/boolean.vue

@@ -41,6 +41,7 @@ import { defineComponent } from 'vue'
 import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue'
 import { ControlWrapper } from '../common'
 import { useBooleanControl } from '../composables'
+import { QCheckbox, QField } from 'quasar'
 
 /**
  * BooleanControlRenderer Component
@@ -72,6 +73,8 @@ const controlRenderer = defineComponent({
   name: 'BooleanControlRenderer',
   components: {
     ControlWrapper,
+    QField,
+    QCheckbox,
   },
   props: {
     ...rendererProps<ControlElement>(),

src/controls/date.vue

@@ -82,22 +82,14 @@
 </template>
 
 <script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isDateControl,
-  or,
-  isDateTimeControl,
-  isTimeControl,
-} from '@jsonforms/core'
+import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isDateControl, or, isDateTimeControl, isTimeControl } from '@jsonforms/core'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { defineComponent } from 'vue'
 import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue'
 import { ControlWrapper } from '../common'
 import { determineClearValue } from '../utils'
-import { QInput } from 'quasar'
+import { QCard, QDate, QIcon, QInput, QPopupProxy, QTime } from 'quasar'
 import { useDateControl } from '../composables'
 
 dayjs.extend(customParseFormat)
@@ -107,6 +99,11 @@ const controlRenderer = defineComponent({
   components: {
     ControlWrapper,
     QInput,
+    QIcon,
+    QPopupProxy,
+    QCard,
+    QTime,
+    QDate,
   },
   props: {
     ...rendererProps<ControlElement>(),

src/controls/enum-and-suggestion.vue

@@ -43,29 +43,22 @@
 </template>
 
 <script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
-  and,
-  hasOption,
-  or,
-  isEnumControl,
-  isPrimitiveArrayControl,
-} from '@jsonforms/core'
-import { defineComponent } from 'vue'
+import { and, ControlElement, hasOption, isEnumControl, isPrimitiveArrayControl, isStringControl, JsonFormsRendererRegistryEntry, or, rankWith } from '@jsonforms/core'
 import { rendererProps, RendererProps, useJsonFormsEnumControl } from '@jsonforms/vue'
+import { QItem, QItemLabel, QItemSection, QSelect } from 'quasar'
+import { defineComponent } from 'vue'
 import { ControlWrapper } from '../common'
-import { determineClearValue } from '../utils'
-import { QInput } from 'quasar'
 import { useEnumSuggestionControl } from '../composables'
+import { determineClearValue } from '../utils'
 
 const controlRenderer = defineComponent({
   name: 'EnumAndSuggestionControlRenderer',
   components: {
     ControlWrapper,
-    QInput,
+    QSelect,
+    QItem,
+    QItemSection,
+    QItemLabel,
   },
   props: {
     ...rendererProps<ControlElement>(),

src/controls/password.vue

@@ -42,26 +42,20 @@
 </template>
 
 <script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
-  and,
-  formatIs,
-} from '@jsonforms/core'
+import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl, and, formatIs } from '@jsonforms/core'
 import { defineComponent } from 'vue'
 import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue'
 import { ControlWrapper } from '../common'
 import { determineClearValue } from '../utils'
-import { QInput } from 'quasar'
+import { QIcon, QInput } from 'quasar'
 import { usePasswordControl } from '../composables'
 
 const controlRenderer = defineComponent({
   name: 'PasswordControlRenderer',
   components: {
     ControlWrapper,
     QInput,
+    QIcon,
   },
   props: {
     ...rendererProps<ControlElement>(),

src/controls/radio-group.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import { and, ControlElement, isEnumControl, JsonFormsRendererRegistryEntry, optionIs, rankWith } from '@jsonforms/core'
 import { rendererProps, RendererProps, useJsonFormsEnumControl } from '@jsonforms/vue'
-import { QInput } from 'quasar'
+import { QField, QOptionGroup } from 'quasar'
 import { defineComponent } from 'vue'
 import { determineClearValue } from '../utils'
 import { ControlWrapper } from '../common'
@@ -53,7 +53,8 @@ const controlRenderer = defineComponent({
   name: 'RadioGroupControlRenderer',
   components: {
     ControlWrapper,
-    QInput,
+    QField,
+    QOptionGroup,
   },
   props: {
     ...rendererProps<ControlElement>(),

src/controls/slider.vue

@@ -46,13 +46,14 @@ import { defineComponent } from 'vue'
 import { rendererProps, useJsonFormsControl, type RendererProps } from '@jsonforms/vue'
 import { ControlWrapper } from '../common'
 import { determineClearValue } from '../utils'
-import { QSlider } from 'quasar'
+import { QField, QSlider } from 'quasar'
 import { useSliderControl } from '../composables'
 
 const controlRenderer = defineComponent({
   name: 'slider-control-renderer',
   components: {
     ControlWrapper,
+    QField,
     QSlider,
   },
   props: {

src/controls/textarea.vue

@@ -34,19 +34,12 @@
       :counter="counter"
       stack-label
       outlined
-      autogrowa
+      autogrow
     )
 </template>
 
 <script lang="ts">
-import {
-  ControlElement,
-  JsonFormsRendererRegistryEntry,
-  rankWith,
-  isStringControl,
-  and,
-  isMultiLineControl,
-} from '@jsonforms/core'
+import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl, and, isMultiLineControl } from '@jsonforms/core'
 import { defineComponent } from 'vue'
 import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue'
 import { ControlWrapper } from '../common'