Type plugins page
This commit is contained in:
parent
aa133e9253
commit
2bd48dde39
|
@ -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()
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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 = () => {}
|
||||||
|
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue