Feature: detail panel select

changelog.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [Unreleased]
+
+### Added
+
+* Draw page:
+  * Add variables selection to each component detail drawer select fields.
+
 ## [1.3.0] - 2023/09/12
 
 ### Added

package.json

@@ -34,7 +34,7 @@
     "v-viewer": "=3.0.11",
     "vue": "=3.3.4",
     "vue-3-sanitize": "=0.1.4",
-    "vue-i18n": "=9.3.0",
+    "vue-i18n": "=9.4.0",
     "vue-router": "=4.2.4"
   },
   "devDependencies": {
@@ -49,7 +49,7 @@
     "@quasar/quasar-app-extension-testing-unit-jest": "=3.0.0-alpha.10",
     "@vue/test-utils": "=2.4.1",
     "@vue/vue3-jest": "=29.2.6",
-    "babel-jest": "=29.6.4",
+    "babel-jest": "=29.7.0",
     "babel-loader": "=9.1.3",
     "better-docs": "=2.7.2",
     "cypress": "=12.17.4",
@@ -64,8 +64,8 @@
     "eslint-plugin-vue": "=9.17.0",
     "eslint-webpack-plugin": "=4.0.1",
     "gherkin-lint": "=4.2.2",
-    "jest": "=29.6.4",
-    "jest-environment-jsdom": "=29.6.4",
+    "jest": "=29.7.0",
+    "jest-environment-jsdom": "=29.7.0",
     "jest-serializer-vue": "=3.1.0",
     "jest-sonar-reporter": "=2.0.0",
     "jsdoc": "=4.0.2",

src/components/inputs/ArrayInput.vue

@@ -13,23 +13,46 @@
     :rules="[
       (value) => isRequired($t, value, attribute.definition?.required),
     ]"
-  />
+  >
+    <template #option="{ opt }">
+      <item-list
+        :item="opt"
+        @select-item="(value) => !localValue.includes(value) ? localValue.push(value) : null"
+      />
+    </template>
+  </q-select>
 </template>
 
 <script setup>
-import { ref, toRef, watch } from 'vue';
+import {
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from 'vue';
 import { isRequired } from 'src/composables/QuasarFieldRule';
+import ItemList from 'components/inputs/ItemList';
+import { initSelectOptions } from 'src/composables/InputManager';
 
 const props = defineProps({
   attribute: {
     type: Object,
     required: true,
   },
+  plugin: {
+    type: Object,
+    required: true,
+  },
 });
 
+const emit = defineEmits(['update:model-value']);
+
 const arrayInput = ref(null);
-const options = toRef(props, 'attribute').value.definition.rules.values;
-const localValue = ref(toRef(props, 'attribute').value.value);
+const options = ref([]);
+const { attribute, plugin } = toRefs(props);
+const localValue = ref(attribute.value.value);
+const defaultValues = ref(attribute.value.definition.rules.values || []);
+const variables = ref(plugin.value.data.variables || []);
 
 watch(() => arrayInput.value, () => {
   if (arrayInput.value) {
@@ -38,10 +61,20 @@ watch(() => arrayInput.value, () => {
 });
 
 watch(() => props.attribute, () => {
-  localValue.value = props.attribute.value;
+  if (props.attribute.value) {
+    localValue.value = props.attribute.value;
+  }
 
   if (arrayInput.value) {
     arrayInput.value.validate();
   }
 });
+
+watch(() => localValue.value, () => {
+  emit('update:model-value', localValue.value);
+}, { deep: true });
+
+onMounted(() => {
+  options.value = initSelectOptions(variables.value, defaultValues.value);
+});
 </script>

src/components/inputs/AttributesList.vue

@@ -5,7 +5,7 @@
     <q-item
       v-for="attribute in data.localAttributes.filter(({ type }) => type !== 'Object')"
       :key="attribute.name"
-      class="q-px-none"
+      class="q-px-sm column"
     >
       <input-wrapper
         class="col"

src/components/inputs/InputWrapper.vue

@@ -19,8 +19,8 @@
         name="fa-solid fa-circle-info"
         color="info"
         size="xs"
-        class="q-ml-sm self-start"
-        style="cursor: help"
+        class="q-mr-md self-start"
+        style="cursor: help;"
       >
         <definition-menu
           :definition="attribute.definition"
@@ -33,7 +33,8 @@
       :is="inputList[getAttributeType(attribute)]"
       :attribute="attribute"
       :plugin="plugin"
-      class="col q-px-md"
+      class="col"
+      style="max-width: 280px"
       :label="getAttributeLabel(attribute)"
       hide-bottom-space
       :full-name="fullName"

src/components/inputs/ItemList.vue

@@ -0,0 +1,65 @@
+<template>
+  <q-expansion-item
+    v-if="item.type === 'category'"
+    expand-separator
+    dense-toggle
+    :header-inset-level="0"
+    :label="$te(item.name) ? $t(item.name) : item.name"
+    header-class="text-weight-medium"
+    default-closed
+  >
+    <item-list
+      v-for="child in item.children"
+      :key="child.name"
+      :header-inset-level="0.2"
+      :item="child"
+      class="item-list"
+      @select-item="(value) => $emit('select-item', value)"
+    />
+  </q-expansion-item>
+  <q-item
+    v-else
+    v-ripple
+    clickable
+    class="bg-grey-3"
+    @click="$emit('select-item', item.formattedName ? item.formattedName : item.value)"
+  >
+    <q-item-section
+      v-if="item.name"
+      class="item"
+    >
+      {{ item.name }}
+    </q-item-section>
+    <q-item-section
+      avatar
+      :class="!item.name ? item : null"
+    >
+      {{ item.value }}
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup>
+import ItemList from 'components/inputs/ItemList';
+
+defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+defineEmits(['select-item']);
+</script>
+
+<style scoped>
+  .item-list {
+    max-width: 280px;
+    max-height: 288px;
+    overflow-y: auto;
+  }
+  .item {
+    width: 50%;
+    word-break: break-all;
+  }
+</style>

src/components/inputs/LinkInput.vue

@@ -4,6 +4,7 @@
     v-model="localValue"
     multiple
     clearable
+    overflow-hidden
     :options="options"
     :rules="[
       (value) => isRequired($t, value, attribute.definition?.required),
@@ -15,12 +16,25 @@
         :name="`img:/plugins/${plugin.data.name}/icons/${iconName}.svg`"
       />
     </template>
+    <template #option="{ opt }">
+      <item-list
+        :item="opt"
+        @select-item="(value) => localValue = [value]"
+      />
+    </template>
   </q-select>
 </template>
 
 <script setup>
-import { ref, toRefs, watch } from 'vue';
+import {
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from 'vue';
 import { isRequired } from 'src/composables/QuasarFieldRule';
+import ItemList from 'components/inputs/ItemList';
+import { initSelectOptions } from 'src/composables/InputManager';
 
 const props = defineProps({
   attribute: {
@@ -33,18 +47,22 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['update:model-value']);
+
 const linkInput = ref(null);
 const { attribute, plugin } = toRefs(props);
 const localValue = ref(attribute.value.value);
-const options = ref(plugin.value.data.getComponentsByType(
-  attribute.value.definition.linkRef,
-).map(({ id }) => id));
+const options = ref([]);
 const iconName = ref(plugin.value.data.definitions.components.find(
   ({ type }) => type === attribute.value.definition.linkRef,
 ).icon);
+const defaultValues = ref(plugin.value.data.getComponentsByType(
+  attribute.value.definition.linkRef,
+).map(({ id }) => id));
+const variables = ref(plugin.value.data.variables || []);
 
 watch(() => props.plugin.data.components, () => {
-  options.value = props.plugin.data.getComponentsByType(
+  defaultValues.value = props.plugin.data.getComponentsByType(
     props.attribute.definition.linkRef,
   ).map(({ id }) => id);
 });
@@ -62,4 +80,12 @@ watch(() => props.attribute, () => {
     linkInput.value.validate();
   }
 });
+
+watch(() => localValue.value, () => {
+  emit('update:model-value', localValue.value);
+});
+
+onMounted(() => {
+  options.value = initSelectOptions(variables.value, defaultValues.value);
+});
 </script>

src/components/inputs/ReferenceInput.vue

@@ -14,12 +14,25 @@
         :name="`img:/plugins/${plugin.data.name}/icons/${iconName}.svg`"
       />
     </template>
+    <template #option="{ opt }">
+      <item-list
+        :item="opt"
+        @select-item="(value) => localValue = [value]"
+      />
+    </template>
   </q-select>
 </template>
 
 <script setup>
-import { ref, toRefs, watch } from 'vue';
+import {
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from 'vue';
 import { isRequired } from 'src/composables/QuasarFieldRule';
+import ItemList from 'components/inputs/ItemList';
+import { initSelectOptions } from 'src/composables/InputManager';
 
 const props = defineProps({
   attribute: {
@@ -32,19 +45,23 @@ const props = defineProps({
   },
 });
 
-const { attribute, plugin } = toRefs(props);
+const emit = defineEmits(['update:model-value']);
+
 const referenceInput = ref(null);
+const { attribute, plugin } = toRefs(props);
 const localValue = ref(attribute.value.value);
-const options = ref(plugin.value.data.getComponentsByType(
-  attribute.value.definition.containerRef,
-  plugin.value.data.components,
-).map(({ id }) => id));
+const options = ref([]);
 const iconName = ref(plugin.value.data.definitions.components.find(
   ({ type }) => type === attribute.value.definition.containerRef,
 ).icon);
+const defaultValues = ref(plugin.value.data.getComponentsByType(
+  attribute.value.definition.containerRef,
+  plugin.value.data.components,
+).map(({ id }) => id));
+const variables = ref(plugin.value.data.variables || []);
 
 watch(() => props.plugin.data.components, () => {
-  options.value = props.plugin.data.getComponentsByType(
+  defaultValues.value = props.plugin.data.getComponentsByType(
     props.attribute.definition.containerRef,
   ).map(({ id }) => id);
 });
@@ -62,4 +79,12 @@ watch(() => props.attribute, () => {
     referenceInput.value.validate();
   }
 });
+
+watch(() => localValue.value, () => {
+  emit('update:model-value', localValue.value);
+});
+
+onMounted(() => {
+  options.value = initSelectOptions(variables.value, defaultValues.value);
+});
 </script>