diff --git a/aleksis/core/frontend/components/generic/forms/ChipSelectField.vue b/aleksis/core/frontend/components/generic/forms/ChipSelectField.vue new file mode 100644 index 0000000000000000000000000000000000000000..91a400e1cdc463451c710a102eb328f74ceb1bce --- /dev/null +++ b/aleksis/core/frontend/components/generic/forms/ChipSelectField.vue @@ -0,0 +1,66 @@ +<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> diff --git a/aleksis/core/frontend/components/generic/forms/ForeignKeyChipSelectField.vue b/aleksis/core/frontend/components/generic/forms/ForeignKeyChipSelectField.vue index f1a20e62faacb7f4ba608f35f218a227064f1c7f..c5f269198e2b38ebf2cd5d1982a6dbb113a8204c 100644 --- a/aleksis/core/frontend/components/generic/forms/ForeignKeyChipSelectField.vue +++ b/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; diff --git a/aleksis/core/frontend/mixins/chipHeightMixin.js b/aleksis/core/frontend/mixins/chipHeightMixin.js new file mode 100644 index 0000000000000000000000000000000000000000..57b62a3c510cec80ceada0c9fef575fdd1e39b8a --- /dev/null +++ b/aleksis/core/frontend/mixins/chipHeightMixin.js @@ -0,0 +1,33 @@ +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`; + }, + }, +};