@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
196 lines (190 loc) • 8.45 kB
JavaScript
import { withActions } from "@storybook/addon-actions/decorator";
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { createShadowHostClass } from "../../providers/shadow-dom/shadow-host-helper";
const meta = {
title: 'Components/Forms/Number Input',
component: 'modus-wc-number-input',
args: {
bordered: true,
disabled: false,
inputmode: 'numeric',
label: 'Label',
size: 'md',
type: 'number',
value: '',
},
argTypes: {
'auto-complete': {
control: { type: 'select' },
options: ['on', 'off'],
},
feedback: {
description: 'Feedback prop for input components',
table: {
type: {
detail: `
Interface: IInputFeedbackProp
Properties:
- level ('error' | 'info' | 'success' | 'warning'): The feedback level
- message (string, optional): The feedback message
`,
},
},
},
'input-aria-invalid': {
control: { type: 'select' },
options: ['true', 'false'],
},
inputmode: {
control: { type: 'select' },
options: ['decimal', 'none', 'numeric'],
},
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg'],
},
type: {
control: { type: 'select' },
options: ['number', 'range'],
},
},
decorators: [withActions],
parameters: {
actions: {
handles: ['inputBlur', 'inputChange', 'inputFocus'],
},
},
};
export default meta;
const Template = {
render: (args) => html `
<modus-wc-number-input
aria-label="Number input"
auto-complete=${ifDefined(args['auto-complete'])}
?bordered=${args.bordered}
currency-symbol=${ifDefined(args['currency-symbol'])}
custom-class=${ifDefined(args['custom-class'])}
?disabled=${args.disabled}
.feedback=${args.feedback}
input-aria-invalid=${ifDefined(args['input-aria-invalid'])}
input-id=${ifDefined(args['input-id'])}
inputmode=${ifDefined(args.inputmode)}
input-tab-index=${ifDefined(args['input-tab-index'])}
label=${ifDefined(args.label)}
max=${ifDefined(args.max)}
min=${ifDefined(args.min)}
name=${ifDefined(args.name)}
placeholder=${ifDefined(args.placeholder)}
?read-only=${args['read-only']}
?required=${args.required}
size=${ifDefined(args.size)}
step=${ifDefined(args.step)}
type=${ifDefined(args.type)}
.value=${args.value}
></modus-wc-number-input>
`,
};
export const Default = Object.assign({}, Template);
const errorFeedback = {
level: 'error',
message: 'Value is required.',
};
export const Currency = Object.assign(Object.assign({}, Template), { args: { 'currency-symbol': '$' } });
export const WithErrorFeedback = Object.assign(Object.assign({}, Template), { args: { feedback: errorFeedback, required: true }, parameters: {
docs: {
source: {
transform: (src) => `${src}
<script>
const numberInputElement = document.querySelector('modus-wc-number-input');
numberInputElement.feedback = {
level: 'error',
message: 'Value is required.'
};
</script>`,
},
},
} });
export const ShadowDomParent = {
render: (args) => {
// Create a unique shadow host for number-input component
if (!customElements.get('number-input-shadow-host')) {
const NumberInputShadowHost = createShadowHostClass({
componentTag: 'modus-wc-number-input',
propsMapper: (v, el) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
const numberInputEl = el;
numberInputEl.autoComplete = (_a = v['auto-complete']) !== null && _a !== void 0 ? _a : '';
numberInputEl.bordered = Boolean(v.bordered);
numberInputEl.currencySymbol = (_b = v['currency-symbol']) !== null && _b !== void 0 ? _b : '';
numberInputEl.customClass = v['custom-class'] || '';
numberInputEl.disabled = Boolean(v.disabled);
numberInputEl.inputId = (_c = v['input-id']) !== null && _c !== void 0 ? _c : '';
numberInputEl.inputTabIndex = (_d = v['input-tab-index']) !== null && _d !== void 0 ? _d : 0;
numberInputEl.label = (_e = v.label) !== null && _e !== void 0 ? _e : '';
numberInputEl.max = (_f = v.max) !== null && _f !== void 0 ? _f : 0;
numberInputEl.min = (_g = v.min) !== null && _g !== void 0 ? _g : 0;
numberInputEl.name = (_h = v.name) !== null && _h !== void 0 ? _h : '';
numberInputEl.placeholder = (_j = v.placeholder) !== null && _j !== void 0 ? _j : '';
numberInputEl.readOnly = Boolean(v['read-only']);
numberInputEl.required = Boolean(v.required);
numberInputEl.size = (_k = v.size) !== null && _k !== void 0 ? _k : '';
numberInputEl.step = (_l = v.step) !== null && _l !== void 0 ? _l : 1;
numberInputEl.type = (_m = v.type) !== null && _m !== void 0 ? _m : '';
numberInputEl.value = v.value;
},
});
customElements.define('number-input-shadow-host', NumberInputShadowHost);
}
return html `<number-input-shadow-host
style="width: 200px;display: block;"
.props=${Object.assign({}, args)}
></number-input-shadow-host>`;
},
};
export const Migration = {
parameters: {
docs: {
description: {
story: `
#### Breaking Changes
- In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled
input model. See the Form Inputs [documentation](/docs/documentation-form-inputs--docs) for
additional info and examples.
- Instead of changing the internal input type for currency formatting, the component now always renders
a number input and displays the currency symbol via the \`currency-symbol\` prop.
- Size values have changed from verbose names (\`medium\`, \`large\`) to abbreviations (\`sm\`, \`md\`, \`lg\`).
#### Prop Mapping
| 1.0 Prop | 2.0 Prop | Notes |
|--------------|---------------------|-----------------------------------------|
| aria-label | aria-label | |
| currency | currency-symbol | |
| disabled | disabled | |
| error-text | feedback.message | Use \`feedback\` level |
| helper-text | | Not carried over |
| label | label | |
| locale | | Not carried over |
| max-value | max | |
| min-value | min | |
| placeholder | placeholder | |
| read-only | read-only | |
| required | required | |
| size | size | \`medium\` → \`md\`, \`large\` → \`lg\` |
| step | step | |
| text-align | | Not carried over, use CSS instead |
| valid-text | feedback.message | Use \`feedback\` level |
| value | value | |
#### Event Mapping
| 1.0 Event | 2.0 Event | Notes |
|--------------|--------------|-------|
| valueChange | inputChange | |
`,
},
},
// To hide the actual story rendering and only show docs:
controls: { disable: true },
canvas: { disable: true },
},
// Simple render function or leave it empty
render: () => html `<div></div>`,
};