mirror of
https://github.com/enso-org/enso.git
synced 2024-12-29 20:32:03 +03:00
b286adaae4
# Important Notes The command to run the gui dev environment has been changed. Invoking the old command will print a message about that. From now on, use `pnpm dev:gui2` in repository root.
80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { logEvent } from 'histoire/client'
|
|
import { computed, ref } from 'vue'
|
|
|
|
import CheckboxWidget from '@/components/widgets/CheckboxWidget.vue'
|
|
import DropdownWidget from '@/components/widgets/DropdownWidget.vue'
|
|
import NumericInputWidget from '@/components/widgets/NumericInputWidget.vue'
|
|
|
|
// === Checkbox props ===
|
|
|
|
const checkboxState = ref(false)
|
|
|
|
// === Numeric props ===
|
|
|
|
const state = ref(0)
|
|
const min = ref(0)
|
|
const max = ref(100)
|
|
const withLimits = ref(true)
|
|
const sliderLimits = computed(() => {
|
|
return withLimits.value ? { min: min.value, max: max.value } : undefined
|
|
})
|
|
|
|
// === Text props ===
|
|
|
|
const text = ref('')
|
|
|
|
// === Dropdown props ===
|
|
|
|
const color = ref('#357ab9')
|
|
const backgroundColor = ref('#4778b4')
|
|
const selectedValue = ref('location')
|
|
const values = ref(['address', 'age', 'id', 'language', 'location', 'workplace'])
|
|
const entries = computed(() =>
|
|
values.value.map((v) => ({ value: v, selected: selectedValue.value === v })),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<Story title="Widgets" group="graph" :layout="{ type: 'grid', width: 200 }" autoPropsDisabled>
|
|
<Variant title="checkbox" :meta="{ customBackground: backgroundColor }">
|
|
<CheckboxWidget v-model="checkboxState" />
|
|
|
|
<template #controls>
|
|
<HstCheckbox v-model="checkboxState" title="v-model" />
|
|
</template>
|
|
</Variant>
|
|
<Variant title="numeric" :meta="{ customBackground: backgroundColor }">
|
|
<NumericInputWidget v-model="state" :limits="sliderLimits" />
|
|
|
|
<template #controls>
|
|
<HstSlider v-model="state" title="v-model" :min="min" :max="max" />
|
|
<HstCheckbox v-model="withLimits" title="With limits" />
|
|
<HstNumber v-model="min" title="min" />
|
|
<HstNumber v-model="max" title="max" />
|
|
</template>
|
|
</Variant>
|
|
<Variant title="text" :meta="{ customBackground: backgroundColor }">
|
|
<template #controls>
|
|
<HstText v-model="text" title="v-model" />
|
|
</template>
|
|
</Variant>
|
|
<Variant title="dropdown">
|
|
<div style="height: 140px">
|
|
<div style="position: relative">
|
|
<DropdownWidget
|
|
:color="color"
|
|
:entries="entries"
|
|
@click="(selectedValue = values[$event]!), logEvent('click', [$event])"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<template #controls>
|
|
<HstColorSelect v-model="color" title="color" />
|
|
<HstSelect v-model="selectedValue" title="selectedValue" :options="values" />
|
|
<HstJson v-model="values" title="values" />
|
|
</template>
|
|
</Variant>
|
|
</Story>
|
|
</template>
|