Extract l10n

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Author: skjnldsv

l10n/messages.pot

@@ -58,7 +58,7 @@ msgstr ""
 msgid "No emoji found"
 msgstr ""
 
-#: src/components/Multiselect/Multiselect.vue:174
+#: src/components/Multiselect/Multiselect.vue:213
 #: src/components/MultiselectTags/MultiselectTags.vue:78
 #: src/components/SettingsSelectGroup/SettingsSelectGroup.vue:38
 msgid "No results"

src/components/ListItemIcon/ListItemIcon.vue

@@ -27,9 +27,10 @@ It might be used for list rendering or within the multiselect for example
 
 ```vue
 <ListItemIcon title="User 1" />
+<ListItemIcon title="User 1" subtitle="Hidden subtitle because size is too small" :avatar-size="24" />
 ```
 ```vue
-<ListItemIcon title="User 1" :size="44" icon="icon-user" />
+<ListItemIcon title="User 1" :avatar-size="44" icon="icon-user" />
 ```
 
 ### With icon
@@ -71,7 +72,7 @@ It might be used for list rendering or within the multiselect for example
 				:text="title"
 				:search="search" />
 			<Highlight
-				v-if="subtitle !== ''"
+				v-if="isValidSubtitle && isSizeBigEnough"
 				class="option__linetwo"
 				:text="subtitle"
 				:search="search" />
@@ -92,7 +93,9 @@ import Avatar from '../Avatar'
 import Highlight from '../Highlight'
 import { userStatus } from '../../mixins'
 
-const margin = 6
+// global margin, ^2 ratio
+const margin = 8
+const defaultSize = 32
 
 export default {
 	name: 'ListItemIcon',
@@ -114,6 +117,7 @@ export default {
 
 		/**
 		 * Secondary optional line
+		 * Only visible on size of 32 and above
 		 */
 		subtitle: {
 			type: String,
@@ -137,11 +141,12 @@ export default {
 		},
 
 		/**
-		 * Set a size in px for the height
+		 * Set a size in px that will define the avatar height/width
+		 * and therefore, the height of the component
 		 */
-		size: {
+		avatarSize: {
 			type: Number,
-			default: 32,
+			default: defaultSize,
 		},
 
 		/**
@@ -172,13 +177,20 @@ export default {
 		hasIcon() {
 			return this.icon !== ''
 		},
-
 		hasSlot() {
 			return !!this.$slots.default
 		},
+
+		isValidSubtitle() {
+			return this.subtitle?.trim?.() !== ''
+		},
+		isSizeBigEnough() {
+			return this.avatarSize >= defaultSize
+		},
+
 		cssVars() {
 			return {
-				'--height': this.size + 2 * this.margin + 'px',
+				'--height': this.avatarSize + 2 * this.margin + 'px',
 				'--margin': this.margin + 'px',
 			}
 		},

src/components/Multiselect/Multiselect.vue

@@ -108,34 +108,34 @@ By specifying `:user-select="true"`, you can benefit from a fully formatted layo
 ```vue
 <template>
 	<Multiselect v-model="value" :options="formatedOptions"
-			label="displayName" track-by="user"
-			:user-select="true"
-			style="width: 250px" />
+		label="displayName" track-by="user"
+		:user-select="true"
+		style="width: 250px" />
 </template>
 
 <script>
 import Multiselect from '../index'
 export default {
 	data() {
-			return {
-					value: null,
-					options: ['admin', 'user1', 'user2', 'guest', 'group1']
-			}
+		return {
+			value: null,
+			options: ['admin', 'user1', 'user2', 'guest', 'group1']
+		}
 	},
 
 	computed: {
-			// Building fake data for the docs
-			formatedOptions() {
-					return this.options.map(item => {
-							return {
-									user: item,
-									displayName: item,
-									subtitle: `This is the ${item.startsWith('group') ? 'group' : 'user'} ${item}`,
-									icon: item.startsWith('group') ? 'icon-group' : 'icon-user',
-									isNoUser: item.startsWith('group')
-							}
-					})
-			}
+		// Building fake data for the docs
+		formatedOptions() {
+			return this.options.map(item => {
+				return {
+					user: item,
+					displayName: item,
+					subtitle: `This is the ${item.startsWith('group') ? 'group' : 'user'} ${item}`,
+					icon: item.startsWith('group') ? 'icon-group' : 'icon-user',
+					isNoUser: item.startsWith('group')
+				}
+			})
+		}
 	}
 }
 </script>