Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add switch component #2296

Merged
merged 200 commits into from
Apr 30, 2024
Merged
Show file tree
Hide file tree
Changes from 197 commits
Commits
Show all changes
200 commits
Select commit Hold shift + click to select a range
9621a44
chore(deps-dev): bump the playwright group with 3 updates
dependabot[bot] Nov 17, 2023
43ee30c
chore: update playwright
nmerget Nov 17, 2023
f238810
fix: issue with new playwright - webkit browser
nmerget Nov 20, 2023
d6a0fe0
Merge branch 'main' of github.com:db-ui/mono into dependabot-npm_and_…
nmerget Nov 20, 2023
eda77ee
chore: update package-lock.json
nmerget Nov 20, 2023
6ccadef
chore: update snapshots
nmerget Nov 20, 2023
aee8e59
fix: issue with webkit
nmerget Nov 20, 2023
1ad8531
chore: update snapshots for webkit
nmerget Nov 20, 2023
94b133c
feat: add color palette and refactor color consumption
nmerget Nov 24, 2023
141c8c1
fix: missing token in showcase
nmerget Nov 27, 2023
97c6853
fix: missing token in showcase
nmerget Nov 27, 2023
cfaeab8
chore: update from main
nmerget Nov 27, 2023
a46f260
chore: update snapshots
nmerget Nov 27, 2023
3f6b900
chore: reverted webkit workaround
nmerget Nov 27, 2023
c5e1fc5
chore: changed playwright image and update snapshots
nmerget Nov 27, 2023
443a543
chore: update snapshots
nmerget Nov 27, 2023
2f5a0c4
chore: update snapshots
nmerget Nov 27, 2023
332ea24
chore: removed webkit screenshots because of icon font issue
nmerget Nov 27, 2023
7b107ec
Merge branch 'main' into dependabot-npm_and_yarn-playwright-45bfcbf8a4
nmerget Nov 27, 2023
1c9fbd9
chore: update snapshots
nmerget Nov 27, 2023
c111ba5
Merge remote-tracking branch 'origin/dependabot-npm_and_yarn-playwrig…
nmerget Nov 27, 2023
807e71c
Merge branch 'dependabot-npm_and_yarn-playwright-45bfcbf8a4' of githu…
nmerget Nov 28, 2023
5cd390b
chore: update snapshots
nmerget Nov 28, 2023
5b352c0
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Nov 28, 2023
80f0df0
chore: update from main
nmerget Nov 28, 2023
72fa07e
chore: fix issues from playwright tests
nmerget Nov 28, 2023
0eda59a
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Nov 28, 2023
52bd11b
chore: update from main
nmerget Nov 28, 2023
1d4751a
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Nov 29, 2023
8a7e083
chore: update from main
nmerget Nov 29, 2023
bebe098
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Nov 29, 2023
9c73dc6
chore: update speaking colors
nmerget Nov 29, 2023
bdf1a51
Merge branch 'main' into feat-color-palette
nmerget Nov 29, 2023
d8860c5
chore: update snapshots
nmerget Nov 29, 2023
4598409
Merge branch 'main' into feat-color-palette
nmerget Nov 29, 2023
4c287e9
chore: update color consumption
nmerget Nov 30, 2023
d524acd
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Nov 30, 2023
c84bb86
chore: fix issues with checkbox/radio
nmerget Nov 30, 2023
dac388e
fix: issue with removed colorVariants from card
nmerget Dec 4, 2023
4264dd9
Merge branch 'main' into feat-color-palette
nmerget Dec 4, 2023
a640d30
chore: update colors
nmerget Jan 3, 2024
937365b
chore: update snapshots
nmerget Jan 3, 2024
b5b2302
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Jan 3, 2024
3f41959
fix: issue with wrong brand hover color
nmerget Jan 3, 2024
efbcc10
fix: issue with solid button
nmerget Jan 9, 2024
49d0e0c
chore: update colors to use bg-1,2,3
nmerget Jan 12, 2024
29e2217
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Jan 12, 2024
a223f64
chore: update snapshots
nmerget Jan 12, 2024
6dc427e
Merge branch 'main' into feat-color-palette
mfranzke Jan 25, 2024
53730e1
fix: issue with wrong import
nmerget Jan 31, 2024
fb932ab
Merge branch 'main' into feat-color-palette
nmerget Jan 31, 2024
9588703
Merge branch 'main' into feat-color-palette
nmerget Jan 31, 2024
98b8920
chore: update default color scheme
nmerget Feb 5, 2024
1b6ba16
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Feb 5, 2024
5126dd6
Merge branch 'main' into feat-color-palette
nmerget Feb 5, 2024
1e5839c
chore: update playwright
nmerget Feb 6, 2024
4c634bc
Merge branch 'main' of github.com:db-ui/mono into chore-update-playwr…
nmerget Feb 6, 2024
bffec24
chore: update from main
nmerget Feb 6, 2024
4c0904e
Merge branch 'chore-update-playwright' of github.com:db-ui/mono into …
nmerget Feb 6, 2024
4b38f1f
chore: update snapshots
nmerget Feb 6, 2024
db2d889
Merge branch 'main' into feat-color-palette
mfranzke Feb 6, 2024
fdd92c7
chore: replaced base with neutral and renamed bg-1 to bg-lvl-1
nmerget Feb 9, 2024
d89e9e4
fix: issue with brand colors
nmerget Feb 13, 2024
10bd9c6
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Feb 13, 2024
de1f713
chore: update from main
nmerget Feb 13, 2024
e101204
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Feb 19, 2024
bc58440
chore: update from main
nmerget Feb 19, 2024
fd14049
chore: update snapshots
nmerget Feb 19, 2024
285b00e
feat: add headline icon size and weight
nmerget Feb 20, 2024
f99b41d
chore: aligned disabled opacity
nmerget Feb 20, 2024
6f37122
chore: reworked button and link
nmerget Feb 20, 2024
6b83917
chore: rename tonality to density
nmerget Feb 20, 2024
785f7ea
chore: add db-puls to tab directly
nmerget Feb 20, 2024
a50faa7
fix: issue with missing block-size for scrollbar
nmerget Feb 20, 2024
cf0ba08
chore: removed semantic colors from form-elements
nmerget Feb 20, 2024
35da2b5
chore: update radio border logic
nmerget Feb 20, 2024
03dcf59
chore: update card
nmerget Feb 20, 2024
26a7a16
chore: update card
nmerget Feb 20, 2024
bb51612
chore: update active state navigation item
nmerget Feb 20, 2024
d164804
chore: update snapshots
nmerget Feb 20, 2024
4cc4d6e
chore: update colors to use "-enabled"
nmerget Feb 22, 2024
9228b5a
fix: issue with wrong color tokens
nmerget Feb 22, 2024
8b47307
Merge branch 'main' into feat-color-palette
nmerget Feb 22, 2024
884f11e
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Feb 23, 2024
1bc882d
fix: issue with popover
nmerget Feb 23, 2024
9657c55
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Feb 26, 2024
677dfa1
fix: issue with angular active tab
nmerget Feb 26, 2024
da548ed
chore: refactored alert and renamed it to notification
nmerget Feb 26, 2024
641f4d8
fix: issue with wrong dir name for notification
nmerget Feb 27, 2024
a7236f3
Merge branch 'main' into feat-color-palette
nmerget Feb 27, 2024
d764b56
chore: add "on-contrast" color
nmerget Feb 27, 2024
b7a7fd9
Merge remote-tracking branch 'origin/feat-color-palette' into feat-co…
nmerget Feb 27, 2024
722377c
fix: issue with base path
nmerget Feb 27, 2024
fbac30a
chore: update fonts and transitions
nmerget Feb 28, 2024
44caa91
chore: update brand colors
nmerget Feb 28, 2024
702de4a
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Feb 28, 2024
e4f3fbd
chore: update from main
nmerget Feb 28, 2024
c80642e
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 1, 2024
df84737
chore: update from main
nmerget Mar 1, 2024
9c301a5
chore: update border variables
nmerget Mar 1, 2024
ddec5b0
feat: add cursor pointer to interactive components
nmerget Mar 1, 2024
95becdb
fix: issue with textarea scrollbar
nmerget Mar 1, 2024
2f02386
chore: update from main
nmerget Mar 1, 2024
6ffcab0
fix: issue with wrong prop
nmerget Mar 1, 2024
9ed8f84
feat: add switch component
nmerget Mar 5, 2024
a935120
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 5, 2024
91474a0
Update switch.lite.tsx
mfranzke Mar 5, 2024
40ecf23
chore: update snapshots
nmerget Mar 5, 2024
bb2f9c3
Merge branch 'feat-color-palette' of github.com:db-ui/mono into feat-…
nmerget Mar 5, 2024
1f11462
chore: update snapshots
nmerget Mar 5, 2024
29cbc06
Merge remote-tracking branch 'origin/feat-switch' into feat-switch
nmerget Mar 5, 2024
9954411
chore: update snapshots
nmerget Mar 5, 2024
24225d4
chore: update Migration.md
nmerget Mar 5, 2024
0020c7f
fix: issue from windows border by using device-pixel-ratio
nmerget Mar 6, 2024
b29d2be
chore: update font-size and color issues found in theme-builder
nmerget Mar 6, 2024
887fb37
Merge branch 'main' into feat-color-palette
nmerget Mar 6, 2024
794f8ab
chore: fix issue with notification close button
nmerget Mar 6, 2024
8ce1006
Merge remote-tracking branch 'origin/feat-color-palette' into feat-co…
nmerget Mar 6, 2024
ede00cf
fix: issue with notification
nmerget Mar 7, 2024
40628f8
fix: issue with tab disabled state
nmerget Mar 7, 2024
d15bbe3
Merge branch 'main' into feat-color-palette
nmerget Mar 7, 2024
0fc38b3
fix: issue with missing not[data-placement] for popover
nmerget Mar 7, 2024
f9f4d38
Merge remote-tracking branch 'origin/feat-color-palette' into feat-co…
nmerget Mar 7, 2024
df7366c
chore: add brand-on variables for colors
nmerget Mar 8, 2024
8c08038
Merge branch 'feat-color-palette' into feat-switch
mfranzke Mar 8, 2024
8968703
fix: issue with tab ids when changing amount of tabs
nmerget Mar 8, 2024
b367f44
chore: update readme
nmerget Mar 8, 2024
38d03a2
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 8, 2024
ed4087e
chore: update from main
nmerget Mar 8, 2024
eb6c09e
Merge branch 'feat-color-palette' of github.com:db-ui/mono into feat-…
nmerget Mar 8, 2024
c215d3a
fix: default color palette
nmerget Mar 8, 2024
23025f7
Merge branch 'feat-color-palette' into feat-switch
nmerget Mar 8, 2024
bed80a1
feat: handle correct validation
nmerget Mar 8, 2024
b431814
chore: revert patternhub delete -.-
nmerget Mar 8, 2024
151be76
fix: issue with angular compile
nmerget Mar 8, 2024
017eff3
fix: issue with angular compile
nmerget Mar 11, 2024
d269493
chore: update notification
nmerget Mar 11, 2024
5051009
chore: update snapshots
nmerget Mar 11, 2024
79d9bbc
fix: issues with validation for form-components
nmerget Mar 11, 2024
cc4c0f8
fix: issue with tabs
nmerget Mar 11, 2024
9924ddd
fix: issue with missing type
nmerget Mar 11, 2024
ba2e7bd
fix: issue with typo in button variant
nmerget Mar 12, 2024
ca08f75
fix: add missing on-contrast variable
nmerget Mar 12, 2024
8da7b5e
fix: minor styling issues for switch
nmerget Mar 15, 2024
6486538
fix: issue with wrong placeholder name
nmerget Mar 15, 2024
cf619ab
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 18, 2024
5e43aa0
chore: update from main
nmerget Mar 18, 2024
135993c
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 18, 2024
e8dd9bf
docs: add migration doc for beta
nmerget Mar 18, 2024
469ad37
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 19, 2024
aa658c5
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 19, 2024
04b464a
Chore mitosis update (#2349)
nmerget Mar 20, 2024
cd0e54d
docs: add migration to global readme
nmerget Mar 20, 2024
429b3a1
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 20, 2024
12be4ac
chore: update from main
nmerget Mar 20, 2024
8e4e9a9
fix: issues with checkbox and radio tags
nmerget Mar 20, 2024
cf99e24
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 20, 2024
94eadc4
chore: update snapshots
nmerget Mar 20, 2024
63e3b77
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Mar 20, 2024
d1fab7b
chore: update from main
nmerget Mar 20, 2024
4f3029e
feat: add message to checkbox (#2364)
nmerget Mar 22, 2024
9896045
Update packages/components/src/components/switch/switch.scss
nmerget Mar 27, 2024
d8bd63e
Update packages/components/src/components/switch/switch.scss
nmerget Mar 27, 2024
ace1d10
Update packages/components/src/components/switch/switch.scss
nmerget Mar 27, 2024
7d5aea3
Update packages/components/src/components/switch/switch.scss
nmerget Mar 27, 2024
902f8af
fix: issues from PR
nmerget Mar 27, 2024
d378661
Merge remote-tracking branch 'origin/feat-switch' into feat-switch
nmerget Mar 27, 2024
e947d5e
chore: update from main
nmerget Mar 27, 2024
3b11468
fix: issue with code docs
nmerget Mar 27, 2024
30a8f69
fix: issue with angular css selectors
nmerget Mar 27, 2024
fac256b
Merge branch 'feat-color-palette' of github.com:db-ui/mono into feat-…
nmerget Mar 27, 2024
5fd9232
chore: typo
mfranzke Mar 28, 2024
d1c2367
Merge branch 'main' of github.com:db-ui/mono into feat-color-palette
nmerget Apr 2, 2024
fe7046c
chore: update from main
nmerget Apr 2, 2024
745ca8c
chore: update package-lock.json
nmerget Apr 2, 2024
ce63673
Merge branch 'main' into feat-color-palette
nmerget Apr 2, 2024
855261f
Merge branch 'feat-color-palette' into feat-switch
mfranzke Apr 3, 2024
36ff6c9
chore: update from main
nmerget Apr 23, 2024
d47a1a9
Update packages/components/src/components/switch/switch.lite.tsx
nmerget Apr 23, 2024
e029bcb
Update packages/components/src/components/switch/switch.lite.tsx
nmerget Apr 23, 2024
d7e90b0
Update packages/components/src/components/switch/switch.lite.tsx
nmerget Apr 23, 2024
468b823
Update packages/components/src/components/switch/switch.lite.tsx
nmerget Apr 23, 2024
d6351ad
Update packages/components/src/components/switch/switch.lite.tsx
nmerget Apr 23, 2024
7cb0d45
Update packages/components/src/components/switch/switch.lite.tsx
nmerget Apr 23, 2024
dfef19e
fix: issues from merge conflicts
nmerget Apr 23, 2024
432672d
Merge branch 'main' of github.com:db-ui/mono into feat-switch
nmerget Apr 23, 2024
ed6b99f
Merge branch 'main' of github.com:db-ui/mono into feat-switch
nmerget Apr 24, 2024
db479cb
fix: removed pixel density workaround
nmerget Apr 24, 2024
2cacb0d
fix: issue with wrong import
nmerget Apr 25, 2024
2ba41cd
fix: issue with event listeners
nmerget Apr 25, 2024
eb15096
chore: update snapshots
nmerget Apr 25, 2024
6466625
chore: update snapshots
nmerget Apr 25, 2024
a25fe73
Merge branch 'main' into feat-switch
nmerget Apr 25, 2024
a3dc031
docs: add switch to patternhub
nmerget Apr 25, 2024
e4c2e08
Merge remote-tracking branch 'origin/feat-switch' into feat-switch
nmerget Apr 25, 2024
e251c96
Merge branch 'main' of github.com:db-ui/mono into feat-switch
nmerget Apr 30, 2024
3053b82
fix: issues from PR
nmerget Apr 30, 2024
dbf9b4f
fix: issues from PR
nmerget Apr 30, 2024
84abfb6
fix: issues from PR
nmerget Apr 30, 2024
c8c6fa9
Merge branch 'main' into feat-switch
nmerget Apr 30, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
if (props.change) {
props.change(event);
}

handleFrameworkEvent(this, event, <%= formValue %>);
},
handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
Expand Down
4 changes: 4 additions & 0 deletions packages/components/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
</head>
<body style="padding: var(--db-spacing-fixed-md)">
<ul>
<li>
<a href="./src/components/switch/index.html">DBSwitch</a>
</li>

<li>
<a href="./src/components/tabs/index.html">DBTabs</a>
</li>
Expand Down
12 changes: 12 additions & 0 deletions packages/components/scripts/post-build/components.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,18 @@
* }]}
*/
const getComponents = () => [
{
name: 'switch',
config: {
vue: {
vModel: [{ modelValue: 'checked', binding: ':checked' }]
},
angular: {
controlValueAccessor: 'checked'
}
}
},

{
name: 'tab-panel',
config: {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,6 @@ Main use-case for converting `px` values or inserting UI styling like e.g. a div

.db-xxx {
@include helpers.divider("top");
text-decoration-thickness: helpers.to-rem($pxValue: 1);
text-decoration-thickness: helpers.px-to-rem($pxValue: 1);
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
if (props.change) {
props.change(event);
}

handleFrameworkEvent(this, event, 'checked');
},
handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
Expand Down
11 changes: 4 additions & 7 deletions packages/components/src/components/checkbox/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,11 @@ import {
FormCheckProps,
InitializedState,
FormMessageProps,
FormMessageState
FormMessageState,
SizeProps
} from '../../shared/model';

export interface DBCheckboxDefaultProps {
/**
* Decide for a size (either regular, which is the default, or small)
*/
size?: 'small';

/**
* Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox
*/
Expand All @@ -31,7 +27,8 @@ export type DBCheckboxProps = DBCheckboxDefaultProps &
FocusEventProps<HTMLInputElement> &
FormProps &
FormCheckProps &
FormMessageProps;
FormMessageProps &
SizeProps;

export type DBCheckboxDefaultState = {};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
@forward "header";

.db-header-navigation-bar {
block-size: functions.to-rem(32);
block-size: functions.px-to-rem(32);
inline-size: auto;
}

.db-header-divider {
block-size: functions.to-rem(32);
block-size: functions.px-to-rem(32);
}
2 changes: 2 additions & 0 deletions packages/components/src/components/page/page.lite.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import {
onInit,
onMount,
onUnMount,
onUpdate,
Slot,
useMetadata,
useRef,
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/components/radio/radio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,10 @@
);
}
}

&:focus-visible {
// Overwrite default border-radius
border-radius: variables.$db-border-radius-full;
}
}
}
24 changes: 24 additions & 0 deletions packages/components/src/components/switch/docs/Angular.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
## Angular

For general installation and configuration take a look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.

### Load component

```ts app.component.ts
// app.component.ts
import { DBSwitch } from '@db-ui/ngx-components';

@Component({
// ...
standalone: true,
imports: [..., DBSwitch],
// ...
})
```

### Use component

```html app.component.html
<!-- app.component.html -->
<db-switch>Switch</db-switch>
```
16 changes: 16 additions & 0 deletions packages/components/src/components/switch/docs/HTML.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
## HTML

For general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package.

### Use component

```html index.html
<!-- index.html -->
...
<body>
<label for="my-id" class="db-switch">
<input type="checkbox" role="switch" id="my-id" />
Switch
</label>
</body>
```
18 changes: 18 additions & 0 deletions packages/components/src/components/switch/docs/Migration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
## General

> **Note**
> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components).

## DB UI Core ➡ DB UI Components

### class

| Before | Status | After | Description |
| ------------ | :----: | ----------- | ----------- |
| `elm-toggle` | 🔁 | `db-switch` | |

### id

| Before | Status | After | Description |
| -------- | :----: | :---: | ----------- |
| `htmlid` | 🔁 | `id` | |
14 changes: 14 additions & 0 deletions packages/components/src/components/switch/docs/React.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
## React

For general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.

### Use component

```tsx App.tsx
// App.tsx
import { DBSwitch } from "@db-ui/react-components";

const App = () => <DBSwitch>Switch</DBSwitch>;

export default App;
```
16 changes: 16 additions & 0 deletions packages/components/src/components/switch/docs/Vue.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
## Vue

For general installation and configuration take a look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.

### Use component

```vue App.vue
<!-- App.vue -->
<script>
import { DBSwitch } from "@db-ui/v-components";
</script>

<template>
<DBSwitch>Switch</DBSwitch>
</template>
```
11 changes: 11 additions & 0 deletions packages/components/src/components/switch/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DBSwitch</title>
<link rel="stylesheet" href="/styles/db-ui-42.css" />
</head>
<body style="padding: var(--db-spacing-fixed-md)">
<div class="db-switch">Test</div>
</body>
</html>
1 change: 1 addition & 0 deletions packages/components/src/components/switch/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as DBSwitch } from './switch';
40 changes: 40 additions & 0 deletions packages/components/src/components/switch/model.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import {
ChangeEventProps,
ChangeEventState,
FocusEventProps,
FocusEventState,
FormProps,
FormState,
GlobalProps,
GlobalState,
FormCheckProps,
InitializedState,
EmphasisProps,
SizeProps,
IconProps,
IconAfterProps
} from '../../shared/model';

export interface DBSwitchDefaultProps {
visualAid?: boolean;
}

export type DBSwitchProps = DBSwitchDefaultProps &
GlobalProps &
ChangeEventProps<HTMLInputElement> &
FocusEventProps<HTMLInputElement> &
FormProps &
FormCheckProps &
EmphasisProps &
SizeProps &
IconProps &
IconAfterProps;

export interface DBSwitchDefaultState {}

export type DBSwitchState = DBSwitchDefaultState &
GlobalState &
ChangeEventState<HTMLInputElement> &
FocusEventState<HTMLInputElement> &
FormState &
InitializedState;
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@forward "switch";
89 changes: 89 additions & 0 deletions packages/components/src/components/switch/switch.lite.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { onMount, useMetadata, useRef, useStore } from '@builder.io/mitosis';
import { DBSwitchProps, DBSwitchState } from './model';
import { cls, uuid } from '../../utils';
import { DEFAULT_ID } from '../../shared/constants';
import { ChangeEvent, InteractionEvent } from '../../shared/model';
import { handleFrameworkEvent } from '../../utils/form-components';

useMetadata({
isAttachedToShadowDom: true
});

export default function DBSwitch(props: DBSwitchProps) {
// This is used as forwardRef
const ref = useRef<HTMLInputElement>(null);
// jscpd:ignore-start
const state = useStore<DBSwitchState>({
_id: DEFAULT_ID,
initialized: false,
handleChange: (event: ChangeEvent<HTMLInputElement>) => {
if (props.onChange) {
props.onChange(event);
}
nmerget marked this conversation as resolved.
Show resolved Hide resolved

if (props.change) {
props.change(event);
}
nmerget marked this conversation as resolved.
Show resolved Hide resolved
handleFrameworkEvent(this, event, 'checked');
},
handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
if (props.onBlur) {
props.onBlur(event);
}
nmerget marked this conversation as resolved.
Show resolved Hide resolved

if (props.blur) {
props.blur(event);
}
nmerget marked this conversation as resolved.
Show resolved Hide resolved
},
handleFocus: (event: InteractionEvent<HTMLInputElement>) => {
if (props.onFocus) {
props.onFocus(event);
}
nmerget marked this conversation as resolved.
Show resolved Hide resolved

if (props.focus) {
props.focus(event);
}
nmerget marked this conversation as resolved.
Show resolved Hide resolved
}
});

onMount(() => {
state._id = props.id || 'switch-' + uuid();
});
// jscpd:ignore-end

return (
<label
data-visual-aid={props.visualAid}
data-size={props.size}
data-variant={props.variant}
data-emphasis={props.emphasis}
htmlFor={state._id}
class={cls('db-switch', props.className)}>
<input
ref={ref}
id={state._id}
type="checkbox"
role="switch"
checked={props.checked}
disabled={props.disabled}
aria-describedby={props.describedbyid}
aria-invalid={props.customValidity === 'invalid'}
data-custom-validity={props.customValidity}
name={props.name}
required={props.required}
data-aid-icon={props.icon}
data-aid-icon-after={props.iconAfter}
onChange={(event: ChangeEvent<HTMLInputElement>) =>
state.handleChange(event)
}
onBlur={(event: InteractionEvent<HTMLInputElement>) =>
state.handleBlur(event)
}
onFocus={(event: InteractionEvent<HTMLInputElement>) =>
state.handleFocus(event)
}
/>
{props.children}
</label>
);
}
Loading
Loading