wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-16 05:13:06 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

ezqms-334: more configurations for radio button and radio group (#3917)

Browse Source 
Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>
This commit is contained in:
Alexey Zinoviev 2023-10-30 19:43:28 +00:00 committed by GitHub
parent 705197a674
commit 8e059919b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/theme/styles/components.scss
View File

@ -322,12 +322,27 @@
&.gap-none { margin-bottom: 0; } &.gap-none { margin-bottom: 0; }
&.gap-small { margin-bottom: .25rem; } &.gap-small { margin-bottom: .25rem; }
&.gap-medium { margin-bottom: .5rem; } &.gap-medium { margin-bottom: .5rem; }
&.gap-large { margin-bottom: 1rem; }
label { label {
flex: 1 1 auto; flex: 1 1 auto;
padding-left: 0.375rem;
font-size: 0.8125rem;
color: var(--theme-content-color); color: var(--theme-content-color);
&.medium {
font-size: 0.8125rem;
}
&.large {
font-size: 0.875rem;
}
&.gap-medium {
padding-left: 0.375rem;
}
&.gap-large {
padding-left: 0.5rem;
}
} }
.marker { .marker {

6
packages/ui/src/components/RadioButton.svelte
View File

@ -23,10 +23,12 @@
export let disabled: boolean = false export let disabled: boolean = false
export let labelOverflow: boolean = false export let labelOverflow: boolean = false
export let label: string | undefined = undefined export let label: string | undefined = undefined
export let labelSize: 'medium' | 'large' = 'medium'
export let labelIntl: IntlString | undefined = undefined export let labelIntl: IntlString | undefined = undefined
export let labelParams: Record<string, any> | undefined = undefined export let labelParams: Record<string, any> | undefined = undefined
export let action: () => void = () => {} export let action: () => void = () => {}
export let gap: 'small' | 'medium' | 'none' = 'none' export let gap: 'large' | 'small' | 'medium' | 'none' = 'none'
export let labelGap: 'large' | 'medium' = 'medium'
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
@ -50,7 +52,7 @@
}} }}
/> />
<div class="marker" /> <div class="marker" />
<label for={id} class:overflow-label={labelOverflow}> <label for={id} class="{labelSize} gap-{labelGap}" class:overflow-label={labelOverflow}>
<slot> <slot>
{#if labelIntl} {#if labelIntl}
<Label label={labelIntl} params={labelParams} /> <Label label={labelIntl} params={labelParams} />

3
packages/ui/src/components/RadioGroup.svelte
View File

@ -19,7 +19,7 @@
export let items: RadioItem[] export let items: RadioItem[]
export let selected: any | undefined = undefined export let selected: any | undefined = undefined
export let disabled: boolean = false export let disabled: boolean = false
export let gap: 'small' | 'medium' | 'none' = 'small' export let gap: 'large' | 'small' | 'medium' | 'none' = 'small'
</script> </script>
{#if items && items.length > 0} {#if items && items.length > 0}
@ -29,6 +29,7 @@
bind:group={selected} bind:group={selected}
id={item.id} id={item.id}
label={item.label} label={item.label}
labelGap={item.labelGap}
labelIntl={item.labelIntl} labelIntl={item.labelIntl}
labelParams={item.labelParams} labelParams={item.labelParams}
value={item.value} value={item.value}

2
packages/ui/src/types.ts
View File

@ -125,6 +125,8 @@ export interface TabItem {
export interface RadioItem { export interface RadioItem {
id?: string id?: string
label?: string label?: string
labelGap?: 'large' | 'medium'
labelSize?: 'medium' | 'large'
labelIntl?: IntlString labelIntl?: IntlString
labelParams?: Record<string, any> labelParams?: Record<string, any>
value: any value: any