Merge pull request #4314 from Budibase/feature/text-input-alignment
Alignment for string based form components
This commit is contained in:
Michael Drury
GitHub
commit
43d84fdc93
|
|
@ -13,6 +13,7 @@
|
|||
start: textarea.selectionStart,
|
||||
end: textarea.selectionEnd,
|
||||
})
|
||||
export let align = null
|
||||
|
||||
let focus = false
|
||||
let textarea
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
bind:this={textarea}
|
||||
placeholder={placeholder || ""}
|
||||
class="spectrum-Textfield-input"
|
||||
style={align ? `text-align: ${align}` : ""}
|
||||
{disabled}
|
||||
{id}
|
||||
on:focus={() => (focus = true)}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
export let updateOnChange = true
|
||||
export let quiet = false
|
||||
export let dataCy
|
||||
export let align
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
let focus = false
|
||||
|
|
@ -92,8 +93,9 @@
|
|||
on:input={onInput}
|
||||
on:keyup={updateValueOnEnter}
|
||||
{type}
|
||||
inputmode={type === "number" ? "decimal" : "text"}
|
||||
class="spectrum-Textfield-input"
|
||||
style={align ? `text-align: ${align};` : ""}
|
||||
inputmode={type === "number" ? "decimal" : "text"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1942,6 +1942,35 @@
|
|||
"type": "validation/string",
|
||||
"label": "Validation",
|
||||
"key": "validation"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Alignment",
|
||||
"key": "align",
|
||||
"defaultValue": "left",
|
||||
"showInBar": true,
|
||||
"barStyle": "buttons",
|
||||
"options": [{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
}, {
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
}, {
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
}, {
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -2373,6 +2402,35 @@
|
|||
"type": "validation/string",
|
||||
"label": "Validation",
|
||||
"key": "validation"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Alignment",
|
||||
"key": "align",
|
||||
"defaultValue": "left",
|
||||
"showInBar": true,
|
||||
"barStyle": "buttons",
|
||||
"options": [{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
}, {
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
}, {
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
}, {
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
export let disabled = false
|
||||
export let validation
|
||||
export let defaultValue = ""
|
||||
export let align
|
||||
|
||||
let fieldState
|
||||
let fieldApi
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
disabled={fieldState.disabled}
|
||||
error={fieldState.error}
|
||||
id={fieldState.fieldId}
|
||||
{align}
|
||||
{placeholder}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
export let disabled = false
|
||||
export let validation
|
||||
export let defaultValue = ""
|
||||
export let align
|
||||
|
||||
let fieldState
|
||||
let fieldApi
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
id={fieldState.fieldId}
|
||||
{placeholder}
|
||||
{type}
|
||||
{align}
|
||||
/>
|
||||
{/if}
|
||||
</Field>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ function testObject(object) {
|
|||
* @param {object|array} object The input structure which is to be recursed, it is important to note that
|
||||
* if the structure contains any cycles then this will fail.
|
||||
* @param {object} context The context that handlebars should fill data from.
|
||||
* @param {object|null} opts optional - specify some options for processing.
|
||||
* @param {object|undefined} opts optional - specify some options for processing.
|
||||
* @returns {Promise<object|array>} The structure input, as fully updated as possible.
|
||||
*/
|
||||
module.exports.processObject = async (object, context, opts) => {
|
||||
|
|
@ -58,11 +58,7 @@ module.exports.processObject = async (object, context, opts) => {
|
|||
* then nothing will occur.
|
||||
* @param {string} string The template string which is the filled from the context object.
|
||||
* @param {object} context An object of information which will be used to enrich the string.
|
||||
<<<<<<< HEAD
|
||||
* @param {object|null} opts optional - specify some options for processing.
|
||||
=======
|
||||
* @param {object|undefined} opts optional - specify some options for processing.
|
||||
>>>>>>> e12767fd8... Fix for #4308 - triple brace conversion was not working correctly, wrote this into the string templates instead - also fixing an issue with the RBAC for Rest.
|
||||
* @returns {Promise<string>} The enriched string, all templates should have been replaced if they can be.
|
||||
*/
|
||||
module.exports.processString = async (string, context, opts) => {
|
||||
|
|
@ -76,11 +72,7 @@ module.exports.processString = async (string, context, opts) => {
|
|||
* @param {object|array} object The input structure which is to be recursed, it is important to note that
|
||||
* if the structure contains any cycles then this will fail.
|
||||
* @param {object} context The context that handlebars should fill data from.
|
||||
<<<<<<< HEAD
|
||||
* @param {object|null} opts optional - specify some options for processing.
|
||||
=======
|
||||
* @param {object|undefined} opts optional - specify some options for processing.
|
||||
>>>>>>> e12767fd8... Fix for #4308 - triple brace conversion was not working correctly, wrote this into the string templates instead - also fixing an issue with the RBAC for Rest.
|
||||
* @returns {object|array} The structure input, as fully updated as possible.
|
||||
*/
|
||||
module.exports.processObjectSync = (object, context, opts) => {
|
||||
|
|
@ -101,11 +93,7 @@ module.exports.processObjectSync = (object, context, opts) => {
|
|||
* then nothing will occur. This is a pure sync call and therefore does not have the full functionality of the async call.
|
||||
* @param {string} string The template string which is the filled from the context object.
|
||||
* @param {object} context An object of information which will be used to enrich the string.
|
||||
<<<<<<< HEAD
|
||||
* @param {object|null} opts optional - specify some options for processing.
|
||||
=======
|
||||
* @param {object|undefined} opts optional - specify some options for processing.
|
||||
>>>>>>> e12767fd8... Fix for #4308 - triple brace conversion was not working correctly, wrote this into the string templates instead - also fixing an issue with the RBAC for Rest.
|
||||
* @returns {string} The enriched string, all templates should have been replaced if they can be.
|
||||
*/
|
||||
module.exports.processStringSync = (string, context, opts) => {
|
||||
|
|
|
|||
|
|
@ -4,12 +4,9 @@ const {
|
|||
isValid,
|
||||
makePropSafe,
|
||||
getManifest,
|
||||
<<<<<<< HEAD
|
||||
encodeJSBinding,
|
||||
doesContainString,
|
||||
=======
|
||||
disableEscaping,
|
||||
>>>>>>> e12767fd8... Fix for #4308 - triple brace conversion was not working correctly, wrote this into the string templates instead - also fixing an issue with the RBAC for Rest.
|
||||
} = require("../src/index.cjs")
|
||||
|
||||
describe("Test that the string processing works correctly", () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue