Merge branch '1090-foreignkey-less-chipselectfield' into 'master'

Resolve "Foreignkey-less chipselectfield"

Closes #1090

See merge request !1572

aleksis/core/frontend/components/generic/forms/ChipSelectField.vue

+<script>
+import VAutocomplete from "@/vuetify/lib/components/VAutocomplete";
+import chipHeightMixin from "../../../mixins/chipHeightMixin";
+import ForeignKeyField from "./ForeignKeyField.vue";
+export default {
+  name: "ChipSelectField",
+  components: { ForeignKeyField },
+  extends: VAutocomplete,
+  mixins: [chipHeightMixin],
+  computed: {
+    classes() {
+      return {
+        ...VAutocomplete.options.computed.classes.call(this),
+        "chip-select-field": true,
+      };
+    },
+  },
+  props: {
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    hideDetails: {
+      type: Boolean,
+      default: true,
+    },
+    filled: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.chip-select-field {
+  & .v-input__control > .v-input__slot {
+    min-height: auto !important;
+    padding: 0 12px;
+    cursor: pointer !important;
+  }
+  & .v-input__slot > .v-progress-linear {
+    margin-left: v-bind(progressPadding);
+    width: calc(100% - v-bind(heightString));
+    top: calc(100% - 2px);
+  }
+  & .v-input__slot > .v-select__slot {
+    & input {
+      color: v-bind(color);
+    }
+    & > .v-input__append-inner {
+      margin-top: 0;
+      align-self: center !important;
+
+      & i {
+        color: v-bind(color);
+      }
+    }
+  }
+  & .v-input__append-outer {
+    margin-top: 0;
+    margin-bottom: 0;
+    align-self: center !important;
+  }
+}
+</style>

aleksis/core/frontend/components/generic/forms/ForeignKeyChipSelectField.vue

@@ -32,40 +32,12 @@ import ForeignKeyField from "./ForeignKeyField.vue";
 </template>
 
 <script>
+import chipHeightMixin from "../../../mixins/chipHeightMixin";
+
 export default {
   name: "ForeignKeyChipSelectField",
   extends: ForeignKeyField,
-  data() {
-    return {
-      heights: {
-        "x-small": 16,
-        small: 24,
-        default: 32,
-        large: 54,
-        "x-large": 66,
-      },
-    };
-  },
-  props: {
-    size: {
-      type: String,
-      required: false,
-      default: "default",
-    },
-  },
-  computed: {
-    height() {
-      return Object.hasOwn(this.heights, this.size)
-        ? this.heights[this.size]
-        : this.heights.default;
-    },
-    heightString() {
-      return `${this.height}px`;
-    },
-    progressPadding() {
-      return `${this.height / 2}px`;
-    },
-  },
+  mixins: [chipHeightMixin],
 };
 </script>
 
@@ -73,7 +45,7 @@ export default {
 .chip-select-field {
   & .v-input__control > .v-input__slot {
     min-height: auto !important;
-    padding: 0px 12px;
+    padding: 0 12px;
     cursor: pointer !important;
   }
   & .v-input__slot > .v-progress-linear {
@@ -81,9 +53,18 @@ export default {
     width: calc(100% - v-bind(heightString));
     top: calc(100% - 2px);
   }
-  & .v-input__slot > .v-select__slot > .v-input__append-inner {
-    margin-top: 0;
-    align-self: center !important;
+  & .v-input__slot > .v-select__slot {
+    & input {
+      color: v-bind(color);
+    }
+    & > .v-input__append-inner {
+      margin-top: 0;
+      align-self: center !important;
+
+      & i {
+        color: v-bind(color);
+      }
+    }
   }
   & .v-input__append-outer {
     margin-top: 0;

aleksis/core/frontend/mixins/chipHeightMixin.js

+const HEIGHTS = {
+  "x-small": 16,
+  small: 24,
+  default: 32,
+  large: 54,
+  "x-large": 66,
+};
+
+/**
+ * Mixin for vue components with the same heights as a v-chip
+ */
+export default {
+  props: {
+    size: {
+      type: String,
+      required: false,
+      default: "default",
+    },
+  },
+  computed: {
+    computedHeight() {
+      return Object.hasOwn(HEIGHTS, this.size)
+        ? HEIGHTS[this.size]
+        : HEIGHTS.default;
+    },
+    heightString() {
+      return `${this.computedHeight}px`;
+    },
+    progressPadding() {
+      return `${this.computedHeight / 2}px`;
+    },
+  },
+};