139 lines
4.0 KiB
JavaScript
139 lines
4.0 KiB
JavaScript
import { action } from "@storybook/addon-actions";
|
|
//use string instead of json format here to avoid ugly formatting in the storybook code snippet
|
|
// let options = "[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]"
|
|
const options = [{
|
|
value: "a",
|
|
label: "option a",
|
|
selected: false
|
|
},
|
|
{
|
|
value: "b",
|
|
label: "option b",
|
|
selected: false
|
|
},
|
|
{
|
|
value: "c",
|
|
label: "option c",
|
|
selected: false
|
|
}];
|
|
export default {
|
|
title: 'Components/Select/Single Select',
|
|
// tags: ['autodocs'],
|
|
args: {
|
|
size: "m",
|
|
searchEnabled: true,
|
|
searchPlaceholderValue: 'Search...',
|
|
placeholder: true,
|
|
placeholderValue: 'Placeholder',
|
|
error: false,
|
|
errorMessage: 'Some error',
|
|
label: '',
|
|
disabled: false,
|
|
// type: 'single', //for later implementation
|
|
},
|
|
argTypes: {
|
|
// type: { //for later implementation
|
|
// // control: { type: 'radio' },
|
|
// control: false,
|
|
// },
|
|
size: {
|
|
options: {
|
|
'small (36px)': 's',
|
|
'medium (40px)': 'm'
|
|
},
|
|
control: {
|
|
type: 'radio',
|
|
},
|
|
},
|
|
placeholder: {
|
|
options: [true, false],
|
|
control: { type: 'radio' },
|
|
},
|
|
placeholderValue: { control: 'text' },
|
|
// value: { for later implementation
|
|
// control: 'text',
|
|
// description: 'Programmatically set the selected value',
|
|
// },
|
|
error: {
|
|
options: [true, false],
|
|
control: { type: 'radio' },
|
|
},
|
|
errorMessage: { control: 'text' },
|
|
label: { control: 'text' },
|
|
disabled: {
|
|
options: [true, false],
|
|
control: { type: 'radio' },
|
|
},
|
|
searchEnabled: {
|
|
options: [true, false],
|
|
control: { type: 'radio' },
|
|
},
|
|
searchPlaceholderValue: { control: { type: 'text' } },
|
|
options: {
|
|
description: 'Takes an array of objects in the following format',
|
|
},
|
|
ifxSelect: {
|
|
action: 'ifxSelect',
|
|
description: 'Custom event emitted when item is selected',
|
|
table: {
|
|
type: {
|
|
summary: 'Framework integration',
|
|
detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
const DefaultTemplate = (args) => {
|
|
const template = `<ifx-select
|
|
ifx-size='${args.size}'
|
|
placeholder='${args.placeholder}'
|
|
search-enabled='${args.searchEnabled}'
|
|
search-placeholder-value='${args.searchPlaceholderValue}'
|
|
ifx-disabled='${args.disabled}'
|
|
ifx-error='${args.error}'
|
|
ifx-error-message='${args.errorMessage}'
|
|
ifx-label='${args.label}'
|
|
ifx-placeholder-value='${args.placeholderValue}'
|
|
ifx-options='${JSON.stringify(args.options)}' >
|
|
</ifx-select>`;
|
|
setTimeout(() => {
|
|
var _a, _b;
|
|
(_a = document.querySelector('ifx-select')) === null || _a === void 0 ? void 0 : _a.addEventListener('ifxSelect', action('ifxSelect'));
|
|
(_b = document.querySelector('ifx-select')) === null || _b === void 0 ? void 0 : _b.addEventListener('ifxInput', action('ifxInput'));
|
|
}, 0);
|
|
return template;
|
|
};
|
|
export const Single = DefaultTemplate.bind({});
|
|
Single.args = {
|
|
// type: 'single',
|
|
options: options,
|
|
};
|
|
// export const Text = DefaultTemplate.bind({});
|
|
// Text.args = {
|
|
// type: 'text',
|
|
// name: 'text',
|
|
// value: 'Placeholder',
|
|
// allowHTML: true,
|
|
// delimiter: ',',
|
|
// editItems: true,
|
|
// maxItemCount: 5,
|
|
// };
|
|
// export const Text = DefaultTemplate.bind({});
|
|
// Text.args = {
|
|
// type: 'multiple',
|
|
// name: 'multiple',
|
|
// choices: 'Choice 1, Choice 2, Choice 3',
|
|
// };
|
|
// export const SingleWithIcon = DefaultTemplate.bind({});
|
|
// SingleWithIcon.args = {
|
|
// type: 'single',
|
|
// choices: "Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>",
|
|
// };
|
|
// export const MultiselectCombobox = DefaultTemplate.bind({});
|
|
// MultiselectCombobox.args = {
|
|
// type: 'multiple',
|
|
// // removeItemButton: true,
|
|
// };
|
|
//# sourceMappingURL=select.stories.js.map
|