From 7742c93992be74cb8cfd314d5394b85b2b3c52ae Mon Sep 17 00:00:00 2001 From: jo <ljonas@riseup.net> Date: Fri, 19 May 2023 12:05:37 +0200 Subject: [PATCH] style: format code using prettier (pre-commit) Part-of: <https://dev.funkwhale.audio/funkwhale/ui/-/merge_requests/40> --- .editorconfig | 1 - .gitlab-ci.yml | 4 +- .gitpod.yml | 1 - docs/components/activity/index.md | 2 +- docs/components/button/basic.md | 31 ++++++------ docs/components/card/album.md | 6 +-- docs/components/card/artist.md | 6 +-- docs/components/card/basic.md | 76 +++++++++++++++-------------- docs/components/card/playlist.md | 6 +-- docs/components/card/podcast.md | 6 +-- docs/components/card/radio.md | 19 ++++---- docs/components/input/index.md | 10 ++-- docs/components/loader/index.md | 6 +-- docs/components/pagination/index.md | 8 +-- docs/components/pill/index.md | 20 ++++---- docs/components/popover/index.md | 73 +++++++++++++++------------ docs/components/tabs/index.md | 12 ++--- docs/components/textarea/index.md | 10 ++-- docs/components/toc/index.md | 6 +-- docs/components/toggle/index.md | 8 +-- src/locales/ca.yaml | 6 +-- src/locales/ca@valencia.yaml | 6 +-- src/locales/de.yaml | 6 +-- src/locales/en.yaml | 15 +++--- src/locales/en_GB.yaml | 6 +-- src/locales/fr.yaml | 6 +-- src/locales/nl.yaml | 6 +-- src/locales/zh_Hans.yaml | 6 +-- src/styles/font/OFL.txt | 2 +- tsconfig.json | 15 +++--- 30 files changed, 201 insertions(+), 184 deletions(-) diff --git a/.editorconfig b/.editorconfig index d6c028b..9f2f1b6 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 88f3782..d3baf0a 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 b376a9a..e192b78 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 edd8bf4..baae950 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 d716172..2884dfa 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 af4ed48..02c9dfa 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 631d582..8f2cc1a 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 ce41844..15197e5 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 7d4e634..0b6b106 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 559a2c0..7de470f 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 5f3105f..11a53c9 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 9c24dc5..191b8c3 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 90b8d2d..d6de491 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 ff0a771..468bc81 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 fb6dc18..e4d40ff 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 4d5e55a..1b743e9 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 41898cd..ae6f39a 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 c691a99..78a826e 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 e5e18d4..2983883 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 400df3c..f0993d1 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/src/locales/ca.yaml b/src/locales/ca.yaml index 687c8be..060dde8 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 e6d1f31..10df4fc 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 82602a4..6ad5022 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 18c057b..1a1a09f 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 645ddb2..65976b1 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 d5257b2..e6e2603 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 da96914..12fda10 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 73c13e2..c6f5a17 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 dfca0da..34850ea 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 6d1a7d1..46fad1d 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" + ] } -- GitLab