diff --git a/.editorconfig b/.editorconfig
index d6c028b8f0469ef64bb3db188fc0fa3e50df9b20..9f2f1b69ab25033055cbe052cdf0612e5ef63d31 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -14,4 +14,3 @@ indent_size = 2
[*.md]
trim_trailing_whitespace = false
-
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index e07919a56343332090472b7b2837b517963e5d8a..7fdf1b763f6f108ae2e8d4456682736c074bf399 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,6 +1,6 @@
include:
- - project: 'funkwhale/gitlab-ci-templates'
- file: '/static_pages/jobs.yaml'
+ - project: "funkwhale/gitlab-ci-templates"
+ file: "/static_pages/jobs.yaml"
stages:
- build
diff --git a/.gitpod.yml b/.gitpod.yml
index b376a9ace5793cccafaead5af21e5aac503e219b..e192b78a71033e34f2bd71fa180411d08fdc6a1e 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,4 +1,3 @@
-
tasks:
- name: Docs
init: yarn install
diff --git a/docs/components/activity/index.md b/docs/components/activity/index.md
index edd8bf4a9fe79df9c3715e450d3cdf24c312d38e..baae95066228f8c22ebc7f494fd1ed5103e93016 100644
--- a/docs/components/activity/index.md
+++ b/docs/components/activity/index.md
@@ -27,7 +27,7 @@ Activities display history entries for a Funkwhale pod. Each item contains the f
- A [popover](./../popover/index.md)
| Prop | Data type | Required? | Description |
-|---------|--------------|-----------|----------------------------------------------|
+| ------- | ------------ | --------- | -------------------------------------------- |
| `track` | Track object | Yes | The track to render in the activity entry. |
| `user` | User object | Yes | The user associated with the activity entry. |
diff --git a/docs/components/button/basic.md b/docs/components/button/basic.md
index d7161724e5bd07bb055f3c02b68caf8ec7ad0e19..2884dfaa94d03ad379e9112a5f4023a13538cf62 100644
--- a/docs/components/button/basic.md
+++ b/docs/components/button/basic.md
@@ -6,17 +6,17 @@ const click = () => new Promise(resolve => setTimeout(resolve, 1000))
Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
-| Prop | Data type | Required? | Description |
-| ----- | ---------- | ---------- | ----------- |
-| `outline` | Boolean | No | Whether to render the button as an outline button. |
-| `shadow` | Boolean | No | Whether to render the button with a shadow |
-| `round` | Boolean | No | Whether to render the button as a round button |
-| `icon` | String | No | The icon attached to the button |
-| `is-active` | Boolean | No | Whether the button is in an active state |
-| `is-loading` | Boolean | No | Whether the button is in a loading state |
-| `primary` | Boolean | No | Renders a primary button |
-| `secondary` | Boolean | No | Renders a secondary button |
-| `destructive` | Boolean | No | Renders a destructive button |
+| Prop | Data type | Required? | Description |
+| ------------- | --------- | --------- | -------------------------------------------------- |
+| `outline` | Boolean | No | Whether to render the button as an outline button. |
+| `shadow` | Boolean | No | Whether to render the button with a shadow |
+| `round` | Boolean | No | Whether to render the button as a round button |
+| `icon` | String | No | The icon attached to the button |
+| `is-active` | Boolean | No | Whether the button is in an active state |
+| `is-loading` | Boolean | No | Whether the button is in a loading state |
+| `primary` | Boolean | No | Renders a primary button |
+| `secondary` | Boolean | No | Renders a secondary button |
+| `destructive` | Boolean | No | Renders a destructive button |
## Button types
@@ -121,6 +121,7 @@ You can give a button a shadow to add depth.
## Button shapes
You can choose different shapes for buttons depending on their location and use.
+
### Normal
Normal buttons are slightly rounded rectangles.
@@ -209,18 +210,16 @@ There is no promise rejection mechanism implemented in the `<fw-button>` compone
```vue
<script setup lang="ts">
-const click = () => new Promise(resolve => setTimeout(resolve, 1000))
+const click = () => new Promise((resolve) => setTimeout(resolve, 1000));
</script>
<template>
- <fw-button @click="click">
- Click me
- </fw-button>
+ <fw-button @click="click"> Click me </fw-button>
</template>
```
<fw-button @click="click">
- Click me
+Click me
</fw-button>
You can override the promise state by passing a false `is-loading` prop.
diff --git a/docs/components/card/album.md b/docs/components/card/album.md
index af4ed48a305793f2133527cf7c64b7197282567e..02c9dfa943b547e3e12638fdec7671b5abd85a77 100644
--- a/docs/components/card/album.md
+++ b/docs/components/card/album.md
@@ -22,9 +22,9 @@ Album cards are specialized cards that represent an album in Funkwhale's interfa
- The artist's name
- The number of tracks in the album
-| Prop | Data type | Required? | Description |
-| ---- | ---------- | ---------- | ------------ |
-| `album` | Album object | Yes | The album represented by the card. |
+| Prop | Data type | Required? | Description |
+| ------- | ------------ | --------- | ---------------------------------- |
+| `album` | Album object | Yes | The album represented by the card. |
The card includes a [play button](../button/play.md) that plays the whole album and a [popover](../popover/index.md) containing other actions the user can perform.
diff --git a/docs/components/card/artist.md b/docs/components/card/artist.md
index 631d5824aaa0d8ba5702ead19c7f4586fe93975c..8f2cc1a7aa82c5c144f3f1d37c773c67c992545f 100644
--- a/docs/components/card/artist.md
+++ b/docs/components/card/artist.md
@@ -20,9 +20,9 @@ Artist cards are specialized cards that represent an artist in Funkwhale's inter
- The artist's genre tags in [pills](../pill/index.md)
- The number of albums associated with the artist
-| Prop | Data type | Required? | Description |
-| ---- | ---------- | ---------- | ------------ |
-| `artist` | Artist object | Yes | The artist represented by the card. |
+| Prop | Data type | Required? | Description |
+| -------- | ------------- | --------- | ----------------------------------- |
+| `artist` | Artist object | Yes | The artist represented by the card. |
The card includes a [play button](../button/play.md) that plays all of the artist's content and a [popover](../popover/index.md) containing other actions the user can perform.
diff --git a/docs/components/card/basic.md b/docs/components/card/basic.md
index ce418447c429018c99f19642a9e5f75629032e27..15197e571555fabf8113d73e5ed8f72b4dcfe2f1 100644
--- a/docs/components/card/basic.md
+++ b/docs/components/card/basic.md
@@ -6,13 +6,13 @@ const alert = (message: string) => window.alert(message)
Funkwhale cards are used to contain textual information, links, and interactive buttons. You can use these to create visually pleasing links to content or to present information.
-| Prop | Data type | Required? | Description |
-|---------|--------------|-----------|----------------------------------------------|
-| `title` | String | No | The title of the card. |
-| `image` | String | No | The URL of an image to display on the card. |
-| `button-title` | String | No | The text that appears on the button. |
-| `category` | Boolean | No | Whether the card is a category card or not. |
-| `tags` | Array\<String\> | No | An array of tags. These are rendered as [pills](../pill/index.md). |
+| Prop | Data type | Required? | Description |
+| -------------- | --------------- | --------- | ------------------------------------------------------------------ |
+| `title` | String | No | The title of the card. |
+| `image` | String | No | The URL of an image to display on the card. |
+| `button-title` | String | No | The text that appears on the button. |
+| `category` | Boolean | No | Whether the card is a category card or not. |
+| `tags` | Array\<String\> | No | An array of tags. These are rendered as [pills](../pill/index.md). |
## Basic card
@@ -33,8 +33,8 @@ Basic cards only contain textual information. You can set a title for the card b
You can make a card interactive by passing an event to the `@click` handler. When a user clicks on the card, the event fires. Use this to add links or events to your cards.
```vue-html{3}
-<fw-card
- title="Frequently Asked Questions"
+<fw-card
+ title="Frequently Asked Questions"
@click="alert('A quick answer!')"
>
Got a question about Funkwhale? Get a quick answer!
@@ -42,10 +42,11 @@ You can make a card interactive by passing an event to the `@click` handler. Whe
```
<fw-card
- title="Frequently Asked Questions"
- @click="alert('A quick answer!')"
->
- Got a question about Funkwhale? Get a quick answer!
+title="Frequently Asked Questions"
+@click="alert('A quick answer!')">
+
+Got a question about Funkwhale? Get a quick answer!
+
</fw-card>
## Category card
@@ -53,17 +54,17 @@ You can make a card interactive by passing an event to the `@click` handler. Whe
Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop.
```vue-html{2}
-<fw-card
- category
- title="Example Translations"
+<fw-card
+ category
+ title="Example Translations"
@click="alert('hello')"
/>
```
-<fw-card
- category
- title="Example Translations"
- @click="alert('hello')"
+<fw-card
+category
+title="Example Translations"
+@click="alert('hello')"
/>
## Image card
@@ -71,7 +72,7 @@ Category cards are basic cards that contain only a title. To create a category c
Cards can contain images for extra visual appeal. Pass an image URL to the `image` prop to create an image card.
```vue-html{3}
-<fw-card
+<fw-card
title="For music lovers"
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
>
@@ -80,10 +81,11 @@ Cards can contain images for extra visual appeal. Pass an image URL to the `imag
```
<fw-card
- title="For music lovers"
- image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
->
- Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
+title="For music lovers"
+image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb">
+
+Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
+
</fw-card>
## Button card
@@ -95,7 +97,7 @@ When you add a `button-title` and a `@click` handler, you event only fires when
:::
```vue-html{3}
-<fw-card
+<fw-card
title="Join an existing pod"
button-title="Find a pod"
@click="alert('Open the pod picker')"
@@ -105,11 +107,12 @@ When you add a `button-title` and a `@click` handler, you event only fires when
```
<fw-card
- title="Join an existing pod"
- button-title="Find a pod"
- @click="alert('Open the pod picker')"
->
- The easiest way to get started with Funkwhale is to register an account on a public pod.
+title="Join an existing pod"
+button-title="Find a pod"
+@click="alert('Open the pod picker')">
+
+The easiest way to get started with Funkwhale is to register an account on a public pod.
+
</fw-card>
## Card tags
@@ -117,7 +120,7 @@ When you add a `button-title` and a `@click` handler, you event only fires when
You can include tags on a card by adding a list of `tags`. These are rendered as [pills](../pill/index.md).
```vue-html{3}
-<fw-card
+<fw-card
title="For music lovers"
:tags="['rock', 'folk', 'punk']"
>
@@ -126,8 +129,9 @@ You can include tags on a card by adding a list of `tags`. These are rendered as
```
<fw-card
- title="For music lovers"
- :tags="['rock', 'folk', 'punk']"
->
- Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
+title="For music lovers"
+:tags="['rock', 'folk', 'punk']">
+
+Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
+
</fw-card>
diff --git a/docs/components/card/playlist.md b/docs/components/card/playlist.md
index 7d4e634b3d7e9e0433b82de4ee00bed3c3c78147..0b6b106a800d35bfa338981f1c4f9dc0e7d42473 100644
--- a/docs/components/card/playlist.md
+++ b/docs/components/card/playlist.md
@@ -23,9 +23,9 @@ Playlist cards are specialized cards that represent playlists in Funkwhale's int
- The user who owns the playlist
- The number of tracks in the playlist
-| Prop | Data type | Required? | Description |
-| ---- | ---------- | ---------- | ------------ |
-| `playlist` | Playlist object | Yes | The playlist represented by the card. |
+| Prop | Data type | Required? | Description |
+| ---------- | --------------- | --------- | ------------------------------------- |
+| `playlist` | Playlist object | Yes | The playlist represented by the card. |
The card includes a [play button](../button/play.md) that plays the playlist and a [popover](../popover/index.md) containing other actions the user can perform.
diff --git a/docs/components/card/podcast.md b/docs/components/card/podcast.md
index 559a2c021717b46b960925aaf657e2780881f2be..7de470fb3628518da408820844cec3b4bb9d55aa 100644
--- a/docs/components/card/podcast.md
+++ b/docs/components/card/podcast.md
@@ -23,9 +23,9 @@ Podcast cards are specialized cards that represent a podcast in Funkwhale's inte
- The owner of the podcast
- The date at which the podcast was last updated
-| Prop | Data type | Required? | Description |
-| ---- | ---------- | ---------- | ------------ |
-| `podcast` | Podcast object | Yes | The podcast represented by the card. |
+| Prop | Data type | Required? | Description |
+| --------- | -------------- | --------- | ------------------------------------ |
+| `podcast` | Podcast object | Yes | The podcast represented by the card. |
The card includes a [popover](../popover/index.md) containing other actions the user can perform.
diff --git a/docs/components/card/radio.md b/docs/components/card/radio.md
index 5f3105fe9ebac30418cd77c80027ccade41a570c..11a53c9bd4f7b7b248c33d9f38bea2fd02cb7834 100644
--- a/docs/components/card/radio.md
+++ b/docs/components/card/radio.md
@@ -14,19 +14,20 @@ Radio cards are specialized cards that represent radios in Funkwhale's interface
The card includes a [play button](../button/play.md) that starts the radio.
-| Prop | Data type | Required? | Description |
-| ---- | ---------- | ---------- | ------------ |
-| `radio` | Radio object | Yes | The radio the card represents |
-| `small` | Boolean | No | Controls whether the card is small or normal sized |
-| `blue` | Boolean | No | Creates a blue card |
-| `red` | Boolean | No | Creates a red card |
-| `purple` | Boolean | No | Creates a purple card |
-| `green` | Boolean | No | Creates a green card |
-| `yellow` | Boolean | No | Creates a yellow card |
+| Prop | Data type | Required? | Description |
+| -------- | ------------ | --------- | -------------------------------------------------- |
+| `radio` | Radio object | Yes | The radio the card represents |
+| `small` | Boolean | No | Controls whether the card is small or normal sized |
+| `blue` | Boolean | No | Creates a blue card |
+| `red` | Boolean | No | Creates a red card |
+| `purple` | Boolean | No | Creates a purple card |
+| `green` | Boolean | No | Creates a green card |
+| `yellow` | Boolean | No | Creates a yellow card |
## Card colors
You can choose what color a radio card is by passing a supported color as a prop.
+
### Blue
::: info
diff --git a/docs/components/input/index.md b/docs/components/input/index.md
index 9c24dc5fb9b753bcdd025a0d5f53e8864ad2b1d5..191b8c3a2d8e970caf29d69741ca875671bffc60 100644
--- a/docs/components/input/index.md
+++ b/docs/components/input/index.md
@@ -2,11 +2,11 @@
Inputs are areas in which users can enter information. In Funkwhale, these mostly take the form of search fields.
-| Prop | Data type | Required? | Description |
-| ----- | --------- | ---------- | ------------ |
-| `placeholder` | String | No | The placeholder text that appears when the input is empty. |
-| `icon` | String | No | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
-| `v-model:value` | String | Yes | The text entered in the input. |
+| Prop | Data type | Required? | Description |
+| --------------- | --------- | --------- | --------------------------------------------------------------------------- |
+| `placeholder` | String | No | The placeholder text that appears when the input is empty. |
+| `icon` | String | No | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
+| `v-model:value` | String | Yes | The text entered in the input. |
## Input model
diff --git a/docs/components/loader/index.md b/docs/components/loader/index.md
index 90b8d2d59d74b26ec9908b40f63434f7363f5425..d6de491f5badb4ed5f24403978c84fd159eed78d 100644
--- a/docs/components/loader/index.md
+++ b/docs/components/loader/index.md
@@ -9,9 +9,9 @@
Loaders visually indicate when an operation is loading. This makes it visually clear that the user can't interact with the element until the loading process is complete.
-| Prop | Data type | Required? | Description |
-| ----- | --------- | ----------- | ----------- |
-| `container` | Boolean | No | Whether to create a container for the loader |
+| Prop | Data type | Required? | Description |
+| ----------- | --------- | --------- | -------------------------------------------- |
+| `container` | Boolean | No | Whether to create a container for the loader |
## Normal loader
diff --git a/docs/components/pagination/index.md b/docs/components/pagination/index.md
index ff0a771a335679152cfd96b17a00cdb8954f884d..468bc81c757a20ec473a471a1f22ecd49e47f652 100644
--- a/docs/components/pagination/index.md
+++ b/docs/components/pagination/index.md
@@ -8,10 +8,10 @@ const page = ref(1)
The pagination component helps users navigate through large lists of results by splitting them up into pages.
-| Prop | Data type | Required? | Description |
-| ----- | --------- | ---------- | ------------ |
-| `pages` | Number | Yes | The total number of pages to paginate. |
-| `v-model:page` | Number | Yes | The page number of the current page. |
+| Prop | Data type | Required? | Description |
+| -------------- | --------- | --------- | -------------------------------------- |
+| `pages` | Number | Yes | The total number of pages to paginate. |
+| `v-model:page` | Number | Yes | The page number of the current page. |
## Pagination model
diff --git a/docs/components/pill/index.md b/docs/components/pill/index.md
index fb6dc187eff67c08d73ba820e5d3fb6212acb9fc..e4d40ffc37e969ee5e05f1ad0b2cfe582f0152d0 100644
--- a/docs/components/pill/index.md
+++ b/docs/components/pill/index.md
@@ -4,16 +4,16 @@ Pills are decorative elements that display information about content they attach
You can add text to pills by adding it between the `<fw-pill>` tags.
-| Prop | Data type | Required? | Description |
-|---------|-----------|-----------|----------------------------------------|
-| `primary` | Boolean | No | Creates a primary pill |
-| `secondary` | Boolean | No | Creates a secondary pill |
-| `destructive` | Boolean | No | Creates a destructive pill |
-| `blue` | Boolean | No | Creates a blue pill |
-| `red` | Boolean | No | Creates a red pill |
-| `purple` | Boolean | No | Creates a purple pill |
-| `green` | Boolean | No | Creates a green pill |
-| `yellow` | Boolean | No | Creates a yellow pill |
+| Prop | Data type | Required? | Description |
+| ------------- | --------- | --------- | -------------------------- |
+| `primary` | Boolean | No | Creates a primary pill |
+| `secondary` | Boolean | No | Creates a secondary pill |
+| `destructive` | Boolean | No | Creates a destructive pill |
+| `blue` | Boolean | No | Creates a blue pill |
+| `red` | Boolean | No | Creates a red pill |
+| `purple` | Boolean | No | Creates a purple pill |
+| `green` | Boolean | No | Creates a green pill |
+| `yellow` | Boolean | No | Creates a yellow pill |
## Pill types
diff --git a/docs/components/popover/index.md b/docs/components/popover/index.md
index 4d5e55a892b30c356b4bf9736dad226ba697dd88..1b743e90513645c5299c476c75238674397b689a 100644
--- a/docs/components/popover/index.md
+++ b/docs/components/popover/index.md
@@ -34,9 +34,9 @@ const fullMenu= ref(false)
Popovers (`fw-popover`) are visually hidden menus of items activated by a simple button. Use popovers to create complex menus in a visually appealing way.
-| Prop | Data type | Required? | Description |
-| ------- | --------- | ----------- | ----------- |
-| `open` | Boolean | No | Controls whether the popover is open. Defaults to `false`. |
+| Prop | Data type | Required? | Description |
+| ------ | --------- | --------- | ---------------------------------------------------------- |
+| `open` | Boolean | No | Controls whether the popover is open. Defaults to `false`. |
## Options button
@@ -170,29 +170,28 @@ const open = ref(false)
</template>
</fw-popover>
-
### Radio
The radio (`fw-popover-radio`) is an item that acts as a radio selector.
-| Prop | Data type | Required? | Description |
-| ----- | --------- | ---------- | ------------ |
-| `modelValue` | String | Yes | The current value of the radio. Use [`v-model`](https://vuejs.org/api/built-in-directives.html#v-model) to bind this to a value. |
-| `choices` | Array\<String\> | Yes | A list of choices. |
+| Prop | Data type | Required? | Description |
+| ------------ | --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `modelValue` | String | Yes | The current value of the radio. Use [`v-model`](https://vuejs.org/api/built-in-directives.html#v-model) to bind this to a value. |
+| `choices` | Array\<String\> | Yes | A list of choices. |
```vue
<script setup lang="ts">
- const open = ref(false)
- const currentChoice = ref('pod')
- const privacy = ['public', 'private', 'pod']
+const open = ref(false);
+const currentChoice = ref("pod");
+const privacy = ["public", "private", "pod"];
</script>
<template>
<fw-popover v-model:open="open">
<fw-options-button @click="open = !open" />
- <template #items>
- <fw-popover-radio v-model="currentChoice" :choices="choices"/>
- </template>
+ <template #items>
+ <fw-popover-radio v-model="currentChoice" :choices="choices" />
+ </template>
</fw-popover>
</template>
```
@@ -378,13 +377,13 @@ Here is an example of a completed menu containing all supported features.
```vue
<script setup lang="ts">
- const open = ref(false)
- const bc = ref(false)
- const cc = ref(false)
- const share = ref(false)
- const bcPrivacy = ref('pod')
- const ccPrivacy = ref('public')
- const privacyChoices = ['private', 'pod', 'public']
+const open = ref(false);
+const bc = ref(false);
+const cc = ref(false);
+const share = ref(false);
+const bcPrivacy = ref("pod");
+const ccPrivacy = ref("public");
+const privacyChoices = ["private", "pod", "public"];
</script>
<template>
@@ -407,14 +406,14 @@ Here is an example of a completed menu containing all supported features.
<i class="bi bi-music-note-list" />
Sample playlist
</fw-popover-item>
- <hr>
+ <hr />
<fw-popover-item>
<i class="bi bi-plus-lg" />
New playlist
</fw-popover-item>
</template>
</fw-popover-submenu>
- <hr>
+ <hr />
<fw-popover-item>
<i class="bi bi-heart" />
Add to favorites
@@ -428,12 +427,19 @@ Here is an example of a completed menu containing all supported features.
<template #after>
<fw-popover>
<template #default="{ toggleOpen }">
- <fw-pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
+ <fw-pill
+ @click.stop="toggleOpen"
+ :blue="bcPrivacy === 'pod'"
+ :red="bcPrivacy === 'public'"
+ >
{{ bcPrivacy }}
</fw-pill>
</template>
<template #items>
- <fw-popover-radio v-model="bcPrivacy" :choices="privacyChoices"/>
+ <fw-popover-radio
+ v-model="bcPrivacy"
+ :choices="privacyChoices"
+ />
</template>
</fw-popover>
</template>
@@ -443,22 +449,29 @@ Here is an example of a completed menu containing all supported features.
<template #after>
<fw-popover>
<template #default="{ toggleOpen }">
- <fw-pill @click.stop="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'">
+ <fw-pill
+ @click.stop="toggleOpen"
+ :blue="ccPrivacy === 'pod'"
+ :red="ccPrivacy === 'public'"
+ >
{{ ccPrivacy }}
</fw-pill>
</template>
<template #items>
- <fw-popover-radio v-model="ccPrivacy" :choices="privacyChoices"/>
+ <fw-popover-radio
+ v-model="ccPrivacy"
+ :choices="privacyChoices"
+ />
</template>
</fw-popover>
</template>
</fw-popover-checkbox>
- <hr>
+ <hr />
<fw-popover-item>
<i class="bi bi-plus-lg" />
New library
</fw-popover-item>
- <hr>
+ <hr />
<fw-popover-checkbox v-model="share">
Share by link
<template #after>
@@ -472,7 +485,7 @@ Here is an example of a completed menu containing all supported features.
<i class="bi bi-cloud-download" />
Download
</fw-popover-item>
- <hr>
+ <hr />
<fw-popover-item>
<i class="bi bi-exclamation" />
Report
diff --git a/docs/components/tabs/index.md b/docs/components/tabs/index.md
index 41898cd25bd294296d371af7da920071902262ff..ae6f39a9200c57399bb07117791cd5d639902b00 100644
--- a/docs/components/tabs/index.md
+++ b/docs/components/tabs/index.md
@@ -2,9 +2,9 @@
Tabs are used to hide information until a user chooses to see it. You can use tabs to show two sets of information on the same page without the user needing to navigate away.
-| Prop | Data type | Required? | Description |
-| ----- | ---------- | ---------- |------------ |
-| `title` | String | Yes | The title of the tab |
+| Prop | Data type | Required? | Description |
+| ------- | --------- | --------- | -------------------- |
+| `title` | String | Yes | The title of the tab |
## Tabbed elements
@@ -61,7 +61,7 @@ You can add a template to the right side of the tabs using the `#tabs-right` dir
<fw-tab title="Overview">Overview content</fw-tab>
<fw-tab title="Activity">Activity content</fw-tab>
- <template #tabs-right>
- <fw-input icon="bi-search" placeholder="Search" />
- </template>
+<template #tabs-right>
+<fw-input icon="bi-search" placeholder="Search" />
+</template>
</fw-tabs>
diff --git a/docs/components/textarea/index.md b/docs/components/textarea/index.md
index c691a994fab33d0f7f84bc50790031c3ce5ab642..78a826e201f17bf002d7bac32d89def8a2b88784 100644
--- a/docs/components/textarea/index.md
+++ b/docs/components/textarea/index.md
@@ -14,11 +14,11 @@ Textareas are input blocks that enable users to write in textual information. Th
Funkwhale supports Markdown syntax in textarea blocks.
:::
-| Prop | Data type | Required? | Description |
-| ---- | ---------- | ----------- | ----------- |
-| `max` | Number | No | The maximum number of characters a user can enter in the textarea. |
-| `placeholder` | String | No | The placeholder text shown on an empty textarea. |
-| `v-model:value` | String | Yes | The text entered into the textarea. |
+| Prop | Data type | Required? | Description |
+| --------------- | --------- | --------- | ------------------------------------------------------------------ |
+| `max` | Number | No | The maximum number of characters a user can enter in the textarea. |
+| `placeholder` | String | No | The placeholder text shown on an empty textarea. |
+| `v-model:value` | String | Yes | The text entered into the textarea. |
## Textarea model
diff --git a/docs/components/toc/index.md b/docs/components/toc/index.md
index e5e18d476093fb8f472a86600e33257ea9abb059..2983883bdac084c4a9a56a540b1da1a5e5ca7a27 100644
--- a/docs/components/toc/index.md
+++ b/docs/components/toc/index.md
@@ -2,9 +2,9 @@
The table of contents component renders a navigation bar on the right of the screen. Users can click on the items in the contents bar to skip to specific headers.
-| Prop | Data type | Required? | Description |
-| ----- | ---------- | --------- | ------------ |
-| `heading` | Enum\<String\> | No | The heading level rendered in the table of contents |
+| Prop | Data type | Required? | Description |
+| --------- | -------------- | --------- | --------------------------------------------------- |
+| `heading` | Enum\<String\> | No | The heading level rendered in the table of contents |
::: details Supported headings
diff --git a/docs/components/toggle/index.md b/docs/components/toggle/index.md
index 400df3c90ac48abcd121780386d050b0aed57d47..f0993d1d4ae90426dc98dde567f8aa0cdb751992 100644
--- a/docs/components/toggle/index.md
+++ b/docs/components/toggle/index.md
@@ -9,10 +9,10 @@ const toggle2 = ref(false)
Toggles are basic form inputs that visually represent a boolean value. Toggles can be **on** (`true`) or **off** (`false`).
-| Prop | Data type | Required? | Description |
-| ----- | ---------- | ---------- | ----------- |
-| `big` | Boolean | No | Controls whether a toggle is big or not. |
-| `v-model:value` | Boolean | Yes | The value controlled by the toggle. |
+| Prop | Data type | Required? | Description |
+| --------------- | --------- | --------- | ---------------------------------------- |
+| `big` | Boolean | No | Controls whether a toggle is big or not. |
+| `v-model:value` | Boolean | Yes | The value controlled by the toggle. |
## Normal toggle
diff --git a/package.json b/package.json
index fbbe31b53e9068977e88383a46eac25d553bfa77..489a78491b235ad34a55ead622853dddc7834901 100644
--- a/package.json
+++ b/package.json
@@ -1,61 +1,61 @@
{
- "name": "@funkwhale/vui",
- "version": "0.1.3",
- "license": "AGPL-3.0-or-later",
- "type": "module",
- "files": [
- "dist"
- ],
- "main": "./dist/vui.umd.cjs",
- "module": "./dist/vui.js",
- "typings": "./dist/vui.d.ts",
- "exports": {
- ".": {
- "import": "./dist/vui.js",
- "require": "./dist/vui.umd.cjs"
- }
- },
- "scripts": {
- "dev": "vite",
- "build": "vue-tsc --noEmit && vite build",
- "preview": "vite preview",
- "test": "vitest run --reporter junit --coverage",
- "test:dev": "vitest",
- "docs:dev": "VP_DOCS=true vitepress dev docs",
- "docs:build": "VP_DOCS=true vitepress build docs",
- "docs:serve": "VP_DOCS=true vitepress serve docs"
- },
- "dependencies": {
- "dompurify": "^2.4.3",
- "showdown": "^2.1.0",
- "transliteration": "^2.3.5"
- },
- "devDependencies": {
- "@types/dompurify": "^2.4.0",
- "@modyfi/vite-plugin-yaml": "^1.x < 1.0.3 || ^1.x >= 1.0.4",
- "@types/showdown": "^2.0.0",
- "@vitejs/plugin-vue": "^4.0.0",
- "@vitest/coverage-c8": "^0.22.1",
- "@vue/test-utils": "^2.0.2",
- "@vue/tsconfig": "^0.1.3",
- "@vueuse/core": "^9.11.1",
- "bootstrap-icons": "^1.9.1",
- "jsdom": "^20.0.0",
- "sass": "^1.57.1",
- "typescript": "^4.9.4",
- "vite": "^4.0.4",
- "vite-plugin-dts": "^1.7.1",
- "vitepress": "^1.0.0-alpha.40",
- "vitest": "^0.27.3",
- "vue": "^3.2.45",
- "vue-i18n": "^9.2.2",
- "vue-router": "^4.1.5",
- "vue-tsc": "^1.0.24"
- },
- "peerDependencies": {
- "@vueuse/core": "^9.3.0",
- "vue": "^3.2.40",
- "vue-i18n": "^9.2.2",
- "vue-router": "^4.1.5"
- }
+ "name": "@funkwhale/vui",
+ "version": "0.1.3",
+ "license": "AGPL-3.0-or-later",
+ "type": "module",
+ "files": [
+ "dist"
+ ],
+ "main": "./dist/vui.umd.cjs",
+ "module": "./dist/vui.js",
+ "typings": "./dist/vui.d.ts",
+ "exports": {
+ ".": {
+ "import": "./dist/vui.js",
+ "require": "./dist/vui.umd.cjs"
+ }
+ },
+ "scripts": {
+ "dev": "vite",
+ "build": "vue-tsc --noEmit && vite build",
+ "preview": "vite preview",
+ "test": "vitest run --reporter junit --coverage",
+ "test:dev": "vitest",
+ "docs:dev": "VP_DOCS=true vitepress dev docs",
+ "docs:build": "VP_DOCS=true vitepress build docs",
+ "docs:serve": "VP_DOCS=true vitepress serve docs"
+ },
+ "dependencies": {
+ "dompurify": "^2.4.3",
+ "showdown": "^2.1.0",
+ "transliteration": "^2.3.5"
+ },
+ "devDependencies": {
+ "@types/dompurify": "^2.4.0",
+ "@modyfi/vite-plugin-yaml": "^1.x < 1.0.3 || ^1.x >= 1.0.4",
+ "@types/showdown": "^2.0.0",
+ "@vitejs/plugin-vue": "^4.0.0",
+ "@vitest/coverage-c8": "^0.22.1",
+ "@vue/test-utils": "^2.0.2",
+ "@vue/tsconfig": "^0.1.3",
+ "@vueuse/core": "^9.11.1",
+ "bootstrap-icons": "^1.9.1",
+ "jsdom": "^20.0.0",
+ "sass": "^1.57.1",
+ "typescript": "^4.9.4",
+ "vite": "^4.0.4",
+ "vite-plugin-dts": "^1.7.1",
+ "vitepress": "^1.0.0-alpha.40",
+ "vitest": "^0.27.3",
+ "vue": "^3.2.45",
+ "vue-i18n": "^9.2.2",
+ "vue-router": "^4.1.5",
+ "vue-tsc": "^1.0.24"
+ },
+ "peerDependencies": {
+ "@vueuse/core": "^9.3.0",
+ "vue": "^3.2.40",
+ "vue-i18n": "^9.2.2",
+ "vue-router": "^4.1.5"
+ }
}
diff --git a/src/locales/ca.yaml b/src/locales/ca.yaml
index 687c8be99ece528163bee143293c3d2e8cbad85d..060dde83364486c4cf863fb26fcf48c1105001fa 100644
--- a/src/locales/ca.yaml
+++ b/src/locales/ca.yaml
@@ -1,8 +1,8 @@
vui:
radio: Ràdio
- albums: '{n} àlbum | {n} àlbums'
- tracks: '{n} pista | {n} pistes'
- episodes: '{n} episodi | {n} episodis'
+ albums: "{n} àlbum | {n} àlbums"
+ tracks: "{n} pista | {n} pistes"
+ episodes: "{n} episodi | {n} episodis"
by-user: per {'@'}{username}
go-to: Anar a
pagination:
diff --git a/src/locales/ca@valencia.yaml b/src/locales/ca@valencia.yaml
index e6d1f3179c34f3cde3927810d1b1d12fc16f87cd..10df4fc2c0217a08c1b146289b49cec946ea2984 100644
--- a/src/locales/ca@valencia.yaml
+++ b/src/locales/ca@valencia.yaml
@@ -1,7 +1,7 @@
vui:
radio: Ràdio
- albums: '{n} àlbum | {n} àlbums'
- episodes: '{n} episodi | {n} episodis'
+ albums: "{n} àlbum | {n} àlbums"
+ episodes: "{n} episodi | {n} episodis"
by-user: per {'@'}{username}
aria:
pagination:
@@ -14,4 +14,4 @@ vui:
next: Següent
previous: Anerior
go-to: Anar a
- tracks: '{n} canço | {n} cançons'
+ tracks: "{n} canço | {n} cançons"
diff --git a/src/locales/de.yaml b/src/locales/de.yaml
index 82602a447d993e5137bb57926c6a9fe620cb5cdc..6ad502241558c714b82179e770a7974bc70dc6fd 100644
--- a/src/locales/de.yaml
+++ b/src/locales/de.yaml
@@ -1,8 +1,8 @@
vui:
radio: Radio
- albums: '{n} Album | {n} Alben'
- tracks: '{n} Titel | {n} Titel'
- episodes: '{n} Episode | {n} Episoden'
+ albums: "{n} Album | {n} Alben"
+ tracks: "{n} Titel | {n} Titel"
+ episodes: "{n} Episode | {n} Episoden"
by-user: von {'@'}{username}
go-to: Gehe zu
pagination:
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 18c057b88e9bcf2acaf25d74b7d4f9e9148ac58f..1a1a09f832d1afeb006a8fd0dad4c333035cab41 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -1,8 +1,8 @@
vui:
radio: Radio
- albums: '{n} album | {n} albums'
- tracks: '{n} track | {n} tracks'
- episodes: '{n} episode | {n} episodes'
+ albums: "{n} album | {n} albums"
+ tracks: "{n} track | {n} tracks"
+ episodes: "{n} episode | {n} episodes"
by-user: "by {'@'}{username}"
go-to: Go to
pagination:
@@ -12,8 +12,7 @@ vui:
aria:
pagination:
nav: Pagination Navigation
- gotoPage: 'Goto Page {n}'
- gotoPrevious: 'Goto Previous Page'
- gotoNext: 'Goto Next Page'
- currentPage: 'Current Page, Page {n}'
-
+ gotoPage: "Goto Page {n}"
+ gotoPrevious: "Goto Previous Page"
+ gotoNext: "Goto Next Page"
+ currentPage: "Current Page, Page {n}"
diff --git a/src/locales/en_GB.yaml b/src/locales/en_GB.yaml
index 645ddb25ad50a650b2343ba28865df18cb5f212f..65976b15b84054d095313271e0c2803c79d5b93e 100644
--- a/src/locales/en_GB.yaml
+++ b/src/locales/en_GB.yaml
@@ -5,9 +5,9 @@ vui:
pagination:
previous: Previous
next: Next
- albums: '{n} album | {n} albums'
- tracks: '{n} track | {n} tracks'
- episodes: '{n} episode | {n} episodes'
+ albums: "{n} album | {n} albums"
+ tracks: "{n} track | {n} tracks"
+ episodes: "{n} episode | {n} episodes"
aria:
pagination:
nav: Pagination Navigation
diff --git a/src/locales/fr.yaml b/src/locales/fr.yaml
index d5257b26bbebbc8483187f4ed5ea104dd028f5dd..e6e2603e545c7fcccc91ffd36c3599bdeea6bd27 100644
--- a/src/locales/fr.yaml
+++ b/src/locales/fr.yaml
@@ -1,5 +1,5 @@
vui:
- tracks: '{n} piste | {n} pistes'
+ tracks: "{n} piste | {n} pistes"
go-to: Aller à
pagination:
previous: Précédent
@@ -12,6 +12,6 @@ vui:
gotoNext: Aller à la Page Suivante
nav: Navigation par Pagination
radio: Radio
- albums: '{n} album | {n} albums'
- episodes: '{n} épisode | {n} épisodes'
+ albums: "{n} album | {n} albums"
+ episodes: "{n} épisode | {n} épisodes"
by-user: par {'@'}{username}
diff --git a/src/locales/nl.yaml b/src/locales/nl.yaml
index da9691414c1a48995604c7ccb2be337966d4b180..12fda1042dbe1b9b48ecb55a0ba0a340b5be73d0 100644
--- a/src/locales/nl.yaml
+++ b/src/locales/nl.yaml
@@ -1,8 +1,8 @@
vui:
radio: Radio
- albums: '{n} album | {n} albums'
- tracks: '{n} nummer | {n} nummers'
- episodes: '{n} aflevering | {n} afleveringen'
+ albums: "{n} album | {n} albums"
+ tracks: "{n} nummer | {n} nummers"
+ episodes: "{n} aflevering | {n} afleveringen"
by-user: door {'@'}{username}
go-to: Ga naar
pagination:
diff --git a/src/locales/zh_Hans.yaml b/src/locales/zh_Hans.yaml
index 73c13e28e5d82fc4dbeefb7728a1a9407a332fa9..c6f5a1767e7727a8403ad7904f4abacbd7afad26 100644
--- a/src/locales/zh_Hans.yaml
+++ b/src/locales/zh_Hans.yaml
@@ -1,6 +1,6 @@
vui:
- tracks: '{n} 歌曲 | {n} 歌曲'
- episodes: '{n} 节目 | {n} 节目'
+ tracks: "{n} 歌曲 | {n} 歌曲"
+ episodes: "{n} 节目 | {n} 节目"
by-user: 由 {'@'}{用户名}
go-to: 去
pagination:
@@ -14,4 +14,4 @@ vui:
gotoNext: 转到下一页
currentPage: 当前页面，第 {n} 页
radio: 电台
- albums: '{n} 专辑 | {n} 专辑'
+ albums: "{n} 专辑 | {n} 专辑"
diff --git a/src/styles/font/OFL.txt b/src/styles/font/OFL.txt
index dfca0da4bcdadf6fa32bed29ecc49ac0e6915b64..34850eab75cae7455569f60c79ebf7e318295798 100644
--- a/src/styles/font/OFL.txt
+++ b/src/styles/font/OFL.txt
@@ -18,7 +18,7 @@ with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
+fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
diff --git a/tsconfig.json b/tsconfig.json
index 6d1a7d1f14f3d8b9190694f96e7076093817ee3e..46fad1d09fa4e7eed90fde4da735d7525ae34b3e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,15 +5,18 @@
"sourceMap": true,
"noUnusedLocals": true,
"typeRoots": ["node_modules/@types"],
- "types": [
- "vitest/globals",
- "vite/client",
- "vue/ref-macros"
- ],
+ "types": ["vitest/globals", "vite/client", "vue/ref-macros"],
"paths": {
"?/*": ["test/*"],
"~/*": ["src/*"]
}
},
- "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts", "test/**/*.ts", "docs/vite.config.ts"]
+ "include": [
+ "src/**/*.d.ts",
+ "src/**/*.ts",
+ "src/**/*.vue",
+ "vite.config.ts",
+ "test/**/*.ts",
+ "docs/vite.config.ts"
+ ]
}