Create ActionCaption component

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/ActionCaption/ActionCaption.vue

@@ -0,0 +1,65 @@
+<!--
+ - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@pm.me>
+ -
+ - @author Marco Ambrosini <marcoambrosini@pm.me>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<docs>
+This component is made to be used inside of the [Actions](#Actions) component slots.
+
+```vue
+ <Actions>
+ <ActionCaption title="Test caption" />
+ <ActionCaption title="Test caption 2" />
+ </Actions>
+```
+</docs>
+
+<template>
+ <li class="app-navigation-caption">
+ {{ title }}
+ </li>
+</template>
+
+<script>
+export default {
+ name: 'ActionCaption',
+ props: {
+ /**
+ * The caption's text
+ */
+ title: {
+ type: String,
+ required: true,
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+ .app-navigation-caption {
+ color: var(--color-text-maxcontrast);
+ line-height: 44px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ box-shadow: none !important;
+ user-select: none;
+ pointer-events: none;
+ margin-left: 12px;
+ padding-right: 14px;
+ }
+</style>

src/components/ActionCaption/index.js

@@ -0,0 +1,24 @@
+/**
+ * @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import ActionCaption from './ActionCaption'
+
+export default ActionCaption

src/components/Actions/Actions.vue

@@ -241,6 +241,7 @@ const allowedChildren = [
  'ActionSeparator',
  'ActionText',
  'ActionTextEditable',
+ 'ActionCaption',
 ]
 
 const focusableSelector = '.focusable'

src/components/index.js

@@ -63,6 +63,7 @@ import PopoverMenu from './PopoverMenu'
 import RichContenteditable from './RichContenteditable'
 import SettingsSection from './SettingsSection'
 import UserBubble from './UserBubble'
+import ActionCaption from './ActionCaption'
 
 export {
  ActionButton,
@@ -107,4 +108,5 @@ export {
  RichContenteditable,
  SettingsSection,
  UserBubble,
+ ActionCaption,
 }