Refactor code to use optional chaining for accessing nested properties

Author: tacxou

src/components/quasar-jsonform/controls/QArrayControlRenderer.vue

@@ -0,0 +1,118 @@
+<template lang="pug">
+//control-wrapper(v-bind="controlWrapper" :styles="styles" :isFocused="isFocused" :appliedOptions="appliedOptions")
+div
+  q-select(
+    :model-value="control.data"
+    :options="suggestions"
+    :input-debounce="0"
+    fill-input
+    :use-input="suggestions.length === 0"
+    use-chips
+    :id="control.id + '-input'"
+    :disable="!control.enabled"
+    :placeholder="appliedOptions.placeholder"
+    :label="computedLabel"
+    :hint="control.description"
+    :error="control.errors !== ''"
+    :error-message="control.errors"
+    :clearable="true"
+    :hide-dropdown-icon="suggestions.length === 0"
+    @update:model-value="onChange"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+    @new-value="createValue"
+    filled multiple
+  )
+  //- q-input(
+  //-   v-else
+  //-   :id="control.id + '-input'"
+  //-   :disable="!control.enabled"
+  //-   :placeholder="appliedOptions.placeholder"
+  //-   :label="computedLabel"
+  //-   :hint="control.description"
+  //-   :error="control.errors !== ''"
+  //-   :error-message="control.errors"
+  //-   :model-value="control.data"
+  //-   :maxlength="appliedOptions.restrict ? control.schema.maxLength : undefined"
+  //-   :clearable="true"
+  //-   @update:model-value="onChange"
+  //-   @focus="isFocused = true"
+  //-   @blur="isFocused = false"
+  //-   filled
+  //- )
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import {
+  isControl,
+  isStringControl,
+  rankWith,
+} from '@jsonforms/core';
+import type { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
+import { isArray, isObject, isString, iterate } from 'radash';
+import type { RendererProps } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
+import { useQuasarControl } from '../util';
+import { ControlWrapper } from '@jsonforms/vue-vanilla';
+
+const QStringControlRenderer = defineComponent({
+  name: 'q-string-control-renderer',
+  components: {
+    ControlWrapper,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    return useQuasarControl(
+      useJsonFormsControl(props),
+      (value) => isObject(value) ? value.value : value || undefined
+    )
+  },
+  methods: {
+    createValue(val, done) {
+      done(val, 'add-unique')
+    },
+    isIterable(obj) {
+      // checks for null and undefined
+      if (obj == null) {
+        return false;
+      }
+      return typeof obj[Symbol.iterator] === 'function';
+    }
+  },
+  computed: {
+    suggestions() {
+      const suggestions = this.control.uischema.options?.suggestion;
+
+      let everyString = false
+      if (this.isIterable(suggestions) && suggestions.length > 0) {
+        for (const suggestion of suggestions) {
+          if (typeof suggestion !== 'string') {
+            everyString = false
+            break
+          }
+          everyString = true
+        }
+      }
+
+      if (
+        suggestions === undefined ||
+        !isArray(suggestions) ||
+        !everyString
+      ) {
+        // check for incorrect data
+        return [];
+      }
+      return suggestions;
+    },
+    computedLabel() {
+      return this.control.label === undefined ? this.control.schema.title : this.control.label;
+    },
+  },
+});
+export default QStringControlRenderer;
+
+</script>

src/components/quasar-jsonform/controls/QPasswordControlRenderer.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+  div password
+  //- <!-- <control-wrapper v-bind="controlWrapper" :styles="styles" :isFocused="isFocused" :appliedOptions="appliedOptions">
+  //-   <v-text-field :type="passwordVisible ? 'text' : 'password'"
+  //-     :append-icon="passwordVisible ? 'mdi-eye' : 'mdi-eye-off'"
+  //-     @click:append="() => (passwordVisible = !passwordVisible)" :id="control.id + '-input'"
+  //-     :class="styles.control.input" :disabled="!control.enabled" :autofocus="appliedOptions.focus"
+  //-     :placeholder="appliedOptions.placeholder" :label="computedLabel" :hint="control.description"
+  //-     :persistent-hint="persistentHint()" :required="control.required" :error-messages="control.errors"
+  //-     :model-value="control.data" :maxlength="appliedOptions.restrict ? control.schema.maxLength : undefined
+  //-   " :size="appliedOptions.trim && control.schema.maxLength !== undefined
+  //-   ? control.schema.maxLength
+  //-   : undefined
+  //-   " v-bind="vuetifyProps('v-text-field')" @update:model-value="onChange" @focus="handleFocus" @blur="handleBlur" />
+  //- </control-wrapper> -->
+</template>
+
+<script lang="ts">
+import {
+  // ControlElement,
+  // JsonFormsRendererRegistryEntry,
+  rankWith,
+  isStringControl,
+  and,
+  formatIs,
+} from '@jsonforms/core';
+import { defineComponent, ref } from 'vue';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  // RendererProps,
+} from '@jsonforms/vue';
+import { default as ControlWrapper } from './ControlWrapper.vue';
+
+const controlRenderer = defineComponent({
+  name: 'password-control-renderer',
+  components: {
+    ControlWrapper,
+    // VTextField,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    const passwordVisible = ref(false);
+
+    return {
+      // ...useVuetifyControl(
+      //   useJsonFormsControl(props),
+      //   (value) => value || undefined,
+      //   300
+      // ),
+      passwordVisible,
+    };
+  },
+});
+
+export default controlRenderer;
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(2, and(isStringControl, formatIs('password'))),
+};
+</script>

src/components/quasar-jsonform/controls/index.ts

@@ -1,26 +1,38 @@
 import QStringControlRenderer from "./QStringControlRenderer.vue";
+import QArrayControlRenderer from "./QArrayControlRenderer.vue";
 import QDateControlRenderer from "./QDateControlRenderer.vue";
 import QNumberControlRenderer from "./QNumberControlRenderer.vue";
-import { isControl, isDateControl, isNumberControl, rankWith, type JsonFormsRendererRegistryEntry } from "@jsonforms/core";
+import QPasswordControlRenderer from "./QPasswordControlRenderer.vue";
+import { isControl, isDateControl, isNumberControl, isPrimitiveArrayControl, rankWith, type JsonFormsRendererRegistryEntry } from "@jsonforms/core";
 
 const QDateControlRendererEntry: JsonFormsRendererRegistryEntry = {
-    renderer: QDateControlRenderer,
-    tester: rankWith(2, isDateControl),
+  renderer: QDateControlRenderer,
+  tester: rankWith(2, isDateControl),
 };
 
 const QNumberControlRendererEntry: JsonFormsRendererRegistryEntry = {
-    renderer: QNumberControlRenderer,
-    tester: rankWith(1, isNumberControl),
+  renderer: QNumberControlRenderer,
+  tester: rankWith(1, isNumberControl),
 };
 
-
 export const QStringControlRendererEntry: JsonFormsRendererRegistryEntry = {
   renderer: QStringControlRenderer,
   tester: rankWith(1, isControl),
 };
 
+export const QArrayControlRendererEntry: JsonFormsRendererRegistryEntry = {
+  renderer: QArrayControlRenderer,
+  tester: rankWith(2, isPrimitiveArrayControl),
+};
+
+export const QPasswordControlRendererEntry: JsonFormsRendererRegistryEntry = {
+  renderer: QPasswordControlRenderer,
+  tester: rankWith(2, isControl),
+};
+
 export const ControlsRenderer = [
-    QDateControlRendererEntry,
-    QNumberControlRendererEntry,
-    QStringControlRendererEntry,
+  QDateControlRendererEntry,
+  QNumberControlRendererEntry,
+  QStringControlRendererEntry,
+  QArrayControlRendererEntry,
 ];