mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-13 11:50:56 +00:00
Added components: RadioButton, RadioGroup (#3505)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
c7efa0d113
commit
b38b252296
@ -301,6 +301,74 @@
|
||||
}
|
||||
.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
|
||||
|
||||
/* Radio Button */
|
||||
.antiRadio {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden;
|
||||
|
||||
& + label {
|
||||
position: relative;
|
||||
margin-top: .375rem;
|
||||
padding-left: 1.375rem;
|
||||
font-size: .8125rem;
|
||||
|
||||
&.gap-none { margin-bottom: .375rem; }
|
||||
&.gap-small { margin-bottom: .625rem; }
|
||||
&.gap-medium { margin-bottom: .875rem; }
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
top: .0625rem;
|
||||
left: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: var(--theme-button-default);
|
||||
border: 1px solid var(--theme-button-border);
|
||||
}
|
||||
&::after {
|
||||
top: .3125rem;
|
||||
left: .25rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
background-color: var(--accented-button-color);
|
||||
}
|
||||
}
|
||||
&:not(:disabled, :checked) + label:hover::before { background-color: var(--theme-button-hovered); }
|
||||
&:not(:disabled):active + label::before { background-color: var(--theme-button-pressed); }
|
||||
&:disabled + label::before {
|
||||
background-color: var(--theme-button-border);
|
||||
border-color: transparent;
|
||||
}
|
||||
&:focus + label::before { box-shadow: 0 0 0 2px var(--accented-button-outline); }
|
||||
&:focus:not(:checked) + label::before {
|
||||
background-color: var(--theme-button-focused);
|
||||
border-color: var(--theme-button-focused-border);
|
||||
}
|
||||
&:checked + label::before {
|
||||
background-color: var(--accented-button-default);
|
||||
border-color: var(--accented-button-border);
|
||||
}
|
||||
&:checked:focus + label::before { background-color: var(--accented-button-focused); }
|
||||
&:checked:hover + label::before { background-color: var(--accented-button-hovered); }
|
||||
&:checked:active + label::before { background-color: var(--accented-button-pressed); }
|
||||
&:checked:disabled + label::before {
|
||||
background-color: var(--accented-button-disabled);
|
||||
border-color: var(--theme-button-border);
|
||||
}
|
||||
&:checked + label::after { content: ''; }
|
||||
}
|
||||
|
||||
/* StatesBar */
|
||||
.antiStatesBar {
|
||||
overflow-x: auto;
|
||||
|
||||
49
packages/ui/src/components/RadioButton.svelte
Normal file
49
packages/ui/src/components/RadioButton.svelte
Normal file
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { IntlString } from '@hcengineering/platform'
|
||||
import { generateId } from '@hcengineering/core'
|
||||
import { Label } from '..'
|
||||
|
||||
export let id: string = generateId()
|
||||
export let group: any
|
||||
export let value: any
|
||||
export let disabled: boolean = false
|
||||
export let label: string | undefined = undefined
|
||||
export let labelIntl: IntlString | undefined = undefined
|
||||
export let labelParams: Record<string, any> | undefined = undefined
|
||||
export let action: () => void = () => {}
|
||||
export let gap: 'small' | 'medium' | 'none' = 'none'
|
||||
</script>
|
||||
|
||||
<input
|
||||
class="antiRadio"
|
||||
{id}
|
||||
type="radio"
|
||||
bind:group
|
||||
{value}
|
||||
{disabled}
|
||||
on:click={() => {
|
||||
if (!disabled && group !== value) action()
|
||||
}}
|
||||
/>
|
||||
<label for={id} class="gap-{gap}">
|
||||
<slot />
|
||||
{#if labelIntl}
|
||||
<Label label={labelIntl} params={labelParams} />
|
||||
{:else}
|
||||
{label}
|
||||
{/if}
|
||||
</label>
|
||||
41
packages/ui/src/components/RadioGroup.svelte
Normal file
41
packages/ui/src/components/RadioGroup.svelte
Normal file
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { RadioItem } from '..'
|
||||
import { RadioButton } from '..'
|
||||
|
||||
export let items: RadioItem[]
|
||||
export let selected: any | undefined = undefined
|
||||
export let disabled: boolean = false
|
||||
export let gap: 'small' | 'medium' | 'none' = 'small'
|
||||
</script>
|
||||
|
||||
{#if items && items.length > 0}
|
||||
<div class="flex-col">
|
||||
{#each items as item, i}
|
||||
<RadioButton
|
||||
bind:group={selected}
|
||||
id={item.id}
|
||||
label={item.label}
|
||||
labelIntl={item.labelIntl}
|
||||
labelParams={item.labelParams}
|
||||
value={item.value}
|
||||
disabled={disabled ? true : item.disabled}
|
||||
action={item.action}
|
||||
gap={i < items.length - 1 ? gap : 'none'}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@ -50,6 +50,8 @@ export { default as Component } from './components/Component.svelte'
|
||||
export { default as Icon } from './components/Icon.svelte'
|
||||
export { default as ActionIcon } from './components/ActionIcon.svelte'
|
||||
export { default as Toggle } from './components/Toggle.svelte'
|
||||
export { default as RadioButton } from './components/RadioButton.svelte'
|
||||
export { default as RadioGroup } from './components/RadioGroup.svelte'
|
||||
export { default as Dialog } from './components/Dialog.svelte'
|
||||
export { default as ToggleWithLabel } from './components/ToggleWithLabel.svelte'
|
||||
export { default as MiniToggle } from './components/MiniToggle.svelte'
|
||||
|
||||
@ -115,6 +115,16 @@ export interface TabItem {
|
||||
action?: () => void
|
||||
}
|
||||
|
||||
export interface RadioItem {
|
||||
id?: string
|
||||
label?: string
|
||||
labelIntl?: IntlString
|
||||
labelParams?: Record<string, any>
|
||||
value: any
|
||||
disabled?: boolean
|
||||
action?: () => void
|
||||
}
|
||||
|
||||
export type ButtonKind =
|
||||
| 'accented'
|
||||
| 'brand'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user