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
Builtin control components #30
Comments
I suggest also adding Number input, Slider, Date/Hour, Radio list, Color picker, Textarea, and JSON (with syntax highlight if possible) Also, I suggest using a checkbox for a boolean (compared to a switch). |
I think we need to have some kind of ways to specify how to display those controls. <script lang="ts" setup>
import { BooleanCtrl, InputCtrl, SliderCtrl } from '@histoire/controls'
import MyComponent from './MyComponent.vue'
import MyCustomControlComponentfrom './MyCustomControlComponent.vue'
function initState () {
return {
disabled: false,
padding: 2,
size: 20,
customData: {},
}
}
const controls = {
disabled: BooleanCtrl,
padding: {
type: InputCtrl,
},
size: {
type: SliderCtrl,
options: {
min: 0,
max: 10,
step: 2,
},
},
customData: {
type: MyCustomControlComponent
},
}
</script>
<template>
<Story
title="My thing"
:init-state="initState"
:controls="controls"
>
<template #default="{ state }">
<MyComponent v-bind="state" />
</template>
</Story>
</template> Here are some different ways to define a control: The standard way, just specify what kind of control you want const controls = {
size: SliderCtrl,
} This is an equivalent to previous example const controls = {
size: {
type: SliderCtrl,
}
} Here you can add options to the controls (depending on what's available) const controls = {
size: {
type: SliderCtrl,
options: {
min: 0,
max: 10,
step: 2,
},
}
} Also, you would be able to provide your own controls (with options) like this: const controls = {
size: {
type: CustomControlComponent,
options: {
weirdOption: 2,
},
},
} Basically, anyone would be able to create their own controls for their specific purpose. Wdyt? |
Also, controls would be automatically inferred from the type of value if not specified. |
We already have the |
Yes, of course, but I was thinking about a way to do it "programmatically" (I mean, in JS and not directly in the template) The advantage being that:
But it's true that we could do only the components to be placed in the controls slot for now |
Hey there, let me know if you need hands with this :) |
@alvarosabu sure, let me do some mockups first |
We could also have a variant of HstRadio with checkboxes, called |
@Akryum sounds great. I just download the repo and create a branch and push? |
I will take HstSelect first
|
So I'm basically done with the Select component. I will need access to push the branch and create the PR @Akryum when you have a chance. |
Done |
Nice, it's ok if I take next?
Cheers |
Sure! |
@Akryum I have one question regarding the radio list, I see you implemented the Is the radio component expected to be implemented in the same way or I can use Thanks |
I find it cleaner |
I'll tackle those 3:
|
I think mobile native inputs are great, but desktop ones probably deserve a custom implementation because how awful they are. |
If I may suggest I think the next one should be JSON code editor since for now the auto-props don't show the initial data and we also aren't able to specify the type of input, then we need to use the controls template. That way we could use the new feature that allows us to hide the auto-props avoiding displaying the same stuff twice. |
Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com> Related to #30
I'm tackling the JSON code editor! |
Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com> Related to #30
I have noticed that the Slider component does not define a step prop, despite the slider story passing one in. I wasn't sure whether I should create a new issue about it. |
@MikhaD The step property is indeed not defined in the component. So it's available in the <input
v-bind="{ ...$attrs, class: null, style: null, min, max }"
> (The Hope it answers your concerns 🙂 |
I appreciate the response. I use Histoire for Svelte, not Vue, so unfortunately the solution does not apply. I have a work around for now, my question is is there a reason that step is not defined or is an oversight that should be placed in a bug report. |
The absence of the step prop was intended at the time of building the component, since it was not needed. But if it can't be used in svelte, that's indeed a bug. Out of curiosity, what workaround have you found? |
I made my own identical looking svelte component with a range prop that I use instead. It is not quite as good, because it doesn't have the tooltip. Why do you say step was not needed? |
IIRC, I built that feature when Histoire didn't support Svelte yet. So the step prop worked anyway. I'll have to take a closer look to fix it for Svelte 🙂 |
The text was updated successfully, but these errors were encountered: