Skip to content

Commit

Permalink
work in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@radium-v @eljefe223
radium-v authored and eljefe223 committed Apr 3, 2023
1 parent 31aca19 commit 0748eb1
Show file tree
Hide file tree
Showing 8 changed files with 324 additions and 50 deletions.
51 changes: 44 additions & 7 deletions packages/web-components/fast-foundation/docs/api-report.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,22 @@

import { CaptureType } from '@microsoft/fast-element';
import { Constructable } from '@microsoft/fast-element';
import { Constructor } from '@open-wc/form-control';
import { CSSDirective } from '@microsoft/fast-element';
import { Direction } from '@microsoft/fast-web-utilities';
import type { ElementsFilter } from '@microsoft/fast-element';
import { ElementStyles } from '@microsoft/fast-element';
import { ElementViewTemplate } from '@microsoft/fast-element';
import { FASTElement } from '@microsoft/fast-element';
import { FASTElementDefinition } from '@microsoft/fast-element';
import { FormControlInterface } from '@open-wc/form-control';
import { HostBehavior } from '@microsoft/fast-element';
import { HostController } from '@microsoft/fast-element';
import { HTMLDirective } from '@microsoft/fast-element';
import { Orientation } from '@microsoft/fast-web-utilities';
import { PartialFASTElementDefinition } from '@microsoft/fast-element';
import type { SyntheticViewTemplate } from '@microsoft/fast-element';
import { Validator } from '@open-wc/form-control';
import { ViewTemplate } from '@microsoft/fast-element';

// @public
Expand Down Expand Up @@ -911,20 +915,53 @@ export interface FASTCalendar extends StartEnd {
export class FASTCard extends FASTElement {
}

// Warning: (ae-forgotten-export) The symbol "FormAssociatedCheckbox" needs to be exported by the entry point index.d.ts
// Warning: (ae-forgotten-export) The symbol "FASTCheckbox_base" needs to be exported by the entry point index.d.ts
//
// @public
export class FASTCheckbox extends FormAssociatedCheckbox {
constructor();
// @internal (undocumented)
clickHandler: (e: MouseEvent) => void;
export class FASTCheckbox extends FASTCheckbox_base {
// (undocumented)
ariaChecked: string | null;
// (undocumented)
checked: boolean;
checkedAttribute: boolean;
// (undocumented)
protected checkedAttributeChanged(prev: boolean | undefined, next: boolean): void;
// (undocumented)
checkedChanged(prev: boolean | undefined, next: boolean): void;
// @internal
clickHandler: (e: Event) => void;
currentChecked: boolean;
// (undocumented)
currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
// (undocumented)
defaultChecked: boolean;
// (undocumented)
defaultCheckedChanged(): void;
// @internal (undocumented)
defaultSlottedNodes: Node[];
indeterminate: boolean;
protected dirtyChecked: boolean;
// @internal
dirtyValue: boolean;
disabled: boolean;
// (undocumented)
static formControlValidators: Validator[];
indeterminate: boolean | undefined;
// (undocumented)
indeterminateChanged(prev: boolean | undefined, next: boolean | undefined): void;
initialValue: string;
// @internal (undocumented)
initialValueChanged(previous: string, next: string): void;
// @internal
keypressHandler: (e: KeyboardEvent) => void;
name: string;
required: boolean;
// (undocumented)
resetFormControl(): void;
// (undocumented)
shouldFormValueUpdate(): boolean;
// (undocumented)
value: string;
// (undocumented)
valueChanged(previous: string, next: string): void;
}

// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
Expand Down
1 change: 1 addition & 0 deletions packages/web-components/fast-foundation/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"@storybook/html": "6.5.10",
"@storybook/manager-webpack5": "6.5.10",
"concurrently": "^7.3.0",
"element-internals-polyfill": "^1.1.17",
"esm": "^3.2.25",
"express": "^4.18.1",
"expect": "29.2.1",
Expand Down
61 changes: 54 additions & 7 deletions packages/web-components/fast-foundation/src/checkbox/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,23 +104,70 @@ export const myCheckbox = Checkbox.compose<CheckboxOptions>({

#### Superclass

| Name | Module | Package |
| ------------------------ | ----------------------------------------- | ------- |
| `FormAssociatedCheckbox` | /src/checkbox/checkbox.form-associated.js | |
| Name | Module | Package |
| ------------- | ------ | ----------------------- |
| `FASTElement` | | @microsoft/fast-element |

#### Mixins

| Name | Module | Package |
| ------------------ | ------ | --------------------- |
| `FormControlMixin` | | @open-wc/form-control |

#### Static Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| ----------------------- | ------- | ------- | --------------------- | ----------- | -------------- |
| `formControlValidators` | | `array` | `[requiredValidator]` | | |

#### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| --------------- | ------- | --------- | ------- | -------------------------------------- | ---------------------- |
| `indeterminate` | public | `boolean` | `false` | The indeterminate state of the control | |
| `proxy` | | | | | FormAssociatedCheckbox |
| Name | Privacy | Type | Default | Description | Inherited From |
| ------------------ | --------- | ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `checkedAttribute` | public | `boolean` | `false` | The initial state of the checkbox. | |
| `defaultChecked` | public | `boolean` | | | |
| `initialValue` | public | `string` | `"on"` | The initial value of the form. This value sets the \`value\` property only when the \`value\` property has not been explicitly set. | |
| `value` | public | `string` | | | |
| `currentChecked` | public | `boolean` | | The current checkedness of the element. This property serves as a mechanism to set the \`checked\` property through both property assignment and the .setAttribute() method. This is useful for setting the field's checkedness in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. | |
| `dirtyChecked` | protected | `boolean` | `false` | Tracks whether the "checked" property has been changed. This is necessary to provide consistent behavior with normal input checkboxes | |
| `checked` | public | `boolean` | `false` | | |
| `disabled` | public | `boolean` | `false` | Sets the element's disabled state. A disabled element will not be included during form submission. | |
| `ariaChecked` | public | `string or null` | | | |
| `indeterminate` | public | `boolean or undefined` | | The indeterminate state of the control | |
| `name` | public | `string` | | The name of the element. This element's value will be surfaced during form submission under the provided name. | |
| `required` | public | `boolean` | `false` | The required state of the element. If true, the element will be required to complete the form. | |

#### Methods

| Name | Privacy | Description | Parameters | Return | Inherited From |
| ------------------------- | --------- | --------------------------------------------------- | -------------------------------------------------------- | --------- | -------------- |
| `checkedAttributeChanged` | protected | | `prev: boolean or undefined, next: boolean` | `void` | |
| `defaultCheckedChanged` | public | | | `void` | |
| `initialValueChanged` | public | Invoked when the \`initialValue\` property changes. | `previous: string, next: string` | `void` | |
| `valueChanged` | public | | `previous: string, next: string` | `void` | |
| `currentCheckedChanged` | public | | `prev: boolean or undefined, next: boolean` | | |
| `checkedChanged` | public | | `prev: boolean or undefined, next: boolean` | `void` | |
| `shouldFormValueUpdate` | | | | `boolean` | |
| `resetFormControl` | | | | `void` | |
| `indeterminateChanged` | public | | `prev: boolean or undefined, next: boolean or undefined` | `void` | |

#### Events

| Name | Type | Description | Inherited From |
| -------- | ---- | ---------------------------------------------------------- | -------------- |
| `change` | | Emits a custom change event when the checked state changes | |

#### Attributes

| Name | Field | Inherited From |
| ----------------- | ---------------- | -------------- |
| `checked` | checkedAttribute | |
| `value` | initialValue | |
| `current-checked` | currentChecked | |
| | disabled | |
| `name` | name | |
| | required | |

#### CSS Parts

| Name | Description |
Expand Down
6 changes: 3 additions & 3 deletions packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ export function checkboxTemplate<T extends FASTCheckbox>(
return html<T>`
<template
role="checkbox"
aria-checked="${x => (x.indeterminate ? "mixed" : x.checked)}"
aria-required="${x => x.required}"
aria-checked="${x => x.ariaChecked}"
aria-disabled="${x => x.disabled}"
aria-required="${x => x.required}"
tabindex="${x => (x.disabled ? null : 0)}"
@keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
@click="${(x, c) => x.clickHandler(c.event)}"
>
<div part="control" class="control">
<slot name="checked-indicator">
Expand Down
Loading

0 comments on commit 0748eb1

Please sign in to comment.