forked from Budibase/budibase
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/test-image' into feature/dependencies-image
- Loading branch information
Showing
44 changed files
with
2,083 additions
and
366 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "version": "2.2.12-alpha.32", | ||
| "version": "2.2.12-alpha.34", | ||
| "npmClient": "yarn", | ||
| "packages": [ | ||
| "packages/*" | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <script> | ||
| import "@spectrum-css/accordion" | ||
| export let itemName | ||
| export let initialOpen | ||
| export let header | ||
| let isOpen | ||
| function getOpenClass(isOpen) { | ||
| if (isOpen === undefined) { | ||
| isOpen = initialOpen | ||
| } | ||
| return isOpen ? "is-open" : "" | ||
| } | ||
| </script> | ||
|
|
||
| <div class="spectrum-Accordion" role={itemName}> | ||
| <div class="spectrum-Accordion-item {getOpenClass(isOpen)}"> | ||
| <h3 class="spectrum-Accordion-itemHeading"> | ||
| <button | ||
| class="spectrum-Accordion-itemHeader" | ||
| type="button" | ||
| on:click={() => (isOpen = !isOpen)} | ||
| > | ||
| {header} | ||
| </button> | ||
| <svg | ||
| class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator" | ||
| focusable="false" | ||
| aria-hidden="true" | ||
| > | ||
| <use xlink:href="#spectrum-css-icon-Chevron100" /> | ||
| </svg> | ||
| </h3> | ||
| <div class="spectrum-Accordion-itemContent" role={itemName}> | ||
| <slot /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| .spectrum-Accordion { | ||
| margin-left: -20px; | ||
| } | ||
| .spectrum-Accordion-item { | ||
| border: none; | ||
| } | ||
| .spectrum-Accordion-itemContent { | ||
| width: 97%; | ||
| padding-left: 30px; | ||
| } | ||
| .spectrum-Accordion-itemHeader { | ||
| text-transform: none; | ||
| font-weight: bold; | ||
| font-size: 0.875rem; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <script> | ||
| import Icon from "../Icon/Icon.svelte" | ||
| import FancyField from "./FancyField.svelte" | ||
| export let icon | ||
| export let disabled | ||
| </script> | ||
|
|
||
| <FancyField on:click clickable {disabled}> | ||
| {#if icon} | ||
| {#if icon.includes("/")} | ||
| <img src={icon} alt="button" /> | ||
| {:else} | ||
| <Icon name={icon} /> | ||
| {/if} | ||
| {/if} | ||
| <div> | ||
| <slot /> | ||
| </div> | ||
| </FancyField> | ||
|
|
||
| <style> | ||
| img { | ||
| width: 22px; | ||
| } | ||
| div { | ||
| font-size: var(--font-size-l); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <script> | ||
| import { createEventDispatcher } from "svelte" | ||
| import FancyField from "./FancyField.svelte" | ||
| import FancyFieldLabel from "./FancyFieldLabel.svelte" | ||
| import ActionButton from "../ActionButton/ActionButton.svelte" | ||
| export let label | ||
| export let value | ||
| export let disabled = false | ||
| export let error = null | ||
| export let validate = null | ||
| export let options = [] | ||
| export let getOptionLabel = option => extractProperty(option, "label") | ||
| export let getOptionValue = option => extractProperty(option, "value") | ||
| const dispatch = createEventDispatcher() | ||
| $: placeholder = !value | ||
| const extractProperty = (value, property) => { | ||
| if (value && typeof value === "object") { | ||
| return value[property] | ||
| } | ||
| return value | ||
| } | ||
| const onChange = newValue => { | ||
| dispatch("change", newValue) | ||
| value = newValue | ||
| if (validate) { | ||
| error = validate(newValue) | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <FancyField {error} {value} {validate} {disabled} autoHeight> | ||
| {#if label} | ||
| <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel> | ||
| {/if} | ||
|
|
||
| <div class="options"> | ||
| {#each options as option} | ||
| <ActionButton | ||
| selected={getOptionValue(option) === value} | ||
| on:click={() => onChange(getOptionValue(option))} | ||
| > | ||
| {getOptionLabel(option)} | ||
| </ActionButton> | ||
| {/each} | ||
| </div> | ||
| </FancyField> | ||
|
|
||
| <style> | ||
| .options { | ||
| margin-top: 34px; | ||
| margin-bottom: 14px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| gap: 6px; | ||
| flex-wrap: wrap; | ||
| } | ||
| .options :global(.spectrum-ActionButton) { | ||
| font-size: 15px; | ||
| line-height: 17px; | ||
| height: auto; | ||
| padding: 6px 10px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <script> | ||
| import { createEventDispatcher } from "svelte" | ||
| import FancyField from "./FancyField.svelte" | ||
| import Checkbox from "../Form/Core/Checkbox.svelte" | ||
| export let value | ||
| export let text | ||
| export let disabled = false | ||
| export let error = null | ||
| export let validate = null | ||
| const dispatch = createEventDispatcher() | ||
| const onChange = () => { | ||
| const newValue = !value | ||
| dispatch("change", newValue) | ||
| value = newValue | ||
| if (validate) { | ||
| error = validate(newValue) | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}> | ||
| <span> | ||
| <Checkbox {disabled} {value} /> | ||
| </span> | ||
| <div class="text"> | ||
| {#if text} | ||
| {text} | ||
| {/if} | ||
| <slot /> | ||
| </div> | ||
| </FancyField> | ||
|
|
||
| <style> | ||
| span { | ||
| pointer-events: none; | ||
| } | ||
| .text { | ||
| font-size: 15px; | ||
| line-height: 17px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 2; | ||
| line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| } | ||
| .text > :global(*) { | ||
| font-size: inherit !important; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| <script> | ||
| import Icon from "../Icon/Icon.svelte" | ||
| import { getContext, onMount } from "svelte" | ||
| import { slide } from "svelte/transition" | ||
| export let disabled = false | ||
| export let error = null | ||
| export let focused = false | ||
| export let clickable = false | ||
| export let validate | ||
| export let value | ||
| export let ref | ||
| export let autoHeight | ||
| const formContext = getContext("fancy-form") | ||
| const id = Math.random() | ||
| const API = { | ||
| validate: () => { | ||
| if (validate) { | ||
| error = validate(value) | ||
| } | ||
| return !error | ||
| }, | ||
| } | ||
| onMount(() => { | ||
| if (formContext) { | ||
| formContext.registerField(id, API) | ||
| } | ||
| return () => { | ||
| if (formContext) { | ||
| formContext.unregisterField(id) | ||
| } | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <div | ||
| bind:this={ref} | ||
| class="fancy-field" | ||
| class:error | ||
| class:disabled | ||
| class:focused | ||
| class:clickable | ||
| class:auto-height={autoHeight} | ||
| > | ||
| <div class="content" on:click> | ||
| <div class="field"> | ||
| <slot /> | ||
| </div> | ||
| {#if error} | ||
| <div class="error-icon"> | ||
| <Icon name="Alert" /> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| {#if error} | ||
| <div transition:slide|local={{ duration: 130 }} class="error-message"> | ||
| {error} | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <style> | ||
| .fancy-field { | ||
| max-width: 400px; | ||
| background: var(--spectrum-global-color-gray-75); | ||
| border: 1px solid var(--spectrum-global-color-gray-300); | ||
| border-radius: 4px; | ||
| box-sizing: border-box; | ||
| transition: border-color 130ms ease-out, background 130ms ease-out, | ||
| background 130ms ease-out; | ||
| color: var(--spectrum-global-color-gray-800); | ||
| } | ||
| .fancy-field:hover { | ||
| border-color: var(--spectrum-global-color-gray-400); | ||
| } | ||
| .fancy-field.clickable:hover { | ||
| background: var(--spectrum-global-color-gray-200); | ||
| cursor: pointer; | ||
| } | ||
| .fancy-field.focused { | ||
| border-color: var(--spectrum-global-color-blue-400); | ||
| } | ||
| .fancy-field.error { | ||
| border-color: var(--spectrum-global-color-red-400); | ||
| } | ||
| .fancy-field.disabled { | ||
| background: var(--spectrum-global-color-gray-200); | ||
| color: var(--spectrum-global-color-gray-400); | ||
| border: 1px solid var(--spectrum-global-color-gray-300); | ||
| pointer-events: none; | ||
| } | ||
| .content { | ||
| position: relative; | ||
| height: 64px; | ||
| padding: 0 16px; | ||
| } | ||
| .fancy-field.auto-height .content { | ||
| height: auto; | ||
| } | ||
| .content, | ||
| .field { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| gap: 16px; | ||
| } | ||
| .field { | ||
| flex: 1 1 auto; | ||
| } | ||
| .error-message { | ||
| background: var(--spectrum-global-color-red-400); | ||
| color: white; | ||
| font-size: 14px; | ||
| padding: 6px 16px; | ||
| font-weight: 500; | ||
| } | ||
| .error-icon { | ||
| flex: 0 0 auto; | ||
| } | ||
| .error-icon :global(.spectrum-Icon) { | ||
| fill: var(--spectrum-global-color-red-400); | ||
| } | ||
| </style> |
Oops, something went wrong.