Type plugins page

This commit is contained in:
Adria Navarro 2024-11-25 18:24:54 +01:00
parent aa133e9253
commit 2bd48dde39
6 changed files with 23 additions and 21 deletions

View File

@ -3,7 +3,7 @@
import AbsTooltip from "../Tooltip/AbsTooltip.svelte" import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
export let type export let type = undefined
export let disabled = false export let disabled = false
export let size = "M" export let size = "M"
export let cta = false export let cta = false
@ -16,8 +16,8 @@
export let active = false export let active = false
export let tooltip = undefined export let tooltip = undefined
export let newStyles = true export let newStyles = true
export let id export let id = undefined
export let ref export let ref = undefined
export let reverse = false export let reverse = false
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()

View File

@ -10,7 +10,7 @@
export let disabled = false export let disabled = false
export let updateOnChange = true export let updateOnChange = true
export let quiet = false export let quiet = false
export let inputRef export let inputRef = undefined
export let helpText = null export let helpText = null
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()

View File

@ -17,18 +17,18 @@
export let getOptionIcon = option => option?.icon export let getOptionIcon = option => option?.icon
export let getOptionColour = option => option?.colour export let getOptionColour = option => option?.colour
export let useOptionIconImage = false export let useOptionIconImage = false
export let isOptionEnabled export let isOptionEnabled = undefined
export let quiet = false export let quiet = false
export let autoWidth = false export let autoWidth = false
export let sort = false export let sort = false
export let tooltip = "" export let tooltip = ""
export let autocomplete = false export let autocomplete = false
export let customPopoverHeight export let customPopoverHeight = undefined
export let align export let align = undefined
export let footer = null export let footer = null
export let tag = null export let tag = null
export let helpText = null export let helpText = null
export let compare export let compare = undefined
export let onOptionMouseenter = () => {} export let onOptionMouseenter = () => {}
export let onOptionMouseleave = () => {} export let onOptionMouseleave = () => {}

View File

@ -43,7 +43,7 @@
export let showHeaderBorder = true export let showHeaderBorder = true
export let placeholderText = "No rows found" export let placeholderText = "No rows found"
export let snippets = [] export let snippets = []
export let defaultSortColumn export let defaultSortColumn = undefined
export let defaultSortOrder = "Ascending" export let defaultSortOrder = "Ascending"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()

View File

@ -1,9 +1,9 @@
<script> <script lang="ts">
import "@spectrum-css/typography/dist/index-vars.css" import "@spectrum-css/typography/dist/index-vars.css"
// Sizes // Sizes
export let size = "M" export let size = "M"
export let textAlign export let textAlign = undefined
export let noPadding = false export let noPadding = false
export let weight = "default" // light, heavy, default export let weight = "default" // light, heavy, default
</script> </script>

View File

@ -1,4 +1,4 @@
<script> <script lang="ts">
import { import {
Layout, Layout,
Heading, Heading,
@ -42,23 +42,25 @@
{ column: "edit", component: EditPluginRenderer }, { column: "edit", component: EditPluginRenderer },
] ]
let modal let modal: any
let searchTerm = "" let searchTerm: any = ""
let filter = "all" let filter: any = "all"
let filterOptions = [ let filterOptions = [
{ label: "All plugins", value: "all" }, { label: "All plugins", value: "all" },
{ label: "Components", value: "component" }, { label: "Components", value: "component" },
] ]
const searchPlaceholder: any = "Search"
if (!$admin.cloud) { if (!$admin.cloud) {
filterOptions.push({ label: "Datasources", value: "datasource" }) filterOptions.push({ label: "Datasources", value: "datasource" })
} }
$: filteredPlugins = $plugins $: filteredPlugins = $plugins
.filter(plugin => { .filter((plugin: any) => {
return filter === "all" || plugin.schema.type === filter return filter === "all" || plugin.schema.type === filter
}) })
.filter(plugin => { .filter((plugin: any) => {
return ( return (
!searchTerm || !searchTerm ||
plugin?.name?.toLowerCase().includes(searchTerm.toLowerCase()) plugin?.name?.toLowerCase().includes(searchTerm.toLowerCase())
@ -85,8 +87,8 @@
<Button <Button
on:click={() => on:click={() =>
window window
.open("https://github.com/Budibase/plugins", "_blank") ?.open("https://github.com/Budibase/plugins", "_blank")
.focus()} ?.focus()}
secondary secondary
> >
GitHub repo GitHub repo
@ -98,12 +100,12 @@
<div class="select"> <div class="select">
<Select <Select
bind:value={filter} bind:value={filter}
placeholder={null} placeholder={undefined}
options={filterOptions} options={filterOptions}
autoWidth autoWidth
/> />
</div> </div>
<Search bind:value={searchTerm} placeholder="Search" /> <Search bind:value={searchTerm} placeholder={searchPlaceholder} />
</div> </div>
{/if} {/if}
</div> </div>