mirror of
https://github.com/enso-org/enso.git
synced 2024-12-18 07:42:21 +03:00
ad6348a12a
Closes #8823 https://github.com/enso-org/enso/assets/6566674/966576ec-6507-401c-98d3-bd71c2ffc6b2 Adds a basic text widget for text literals. ### Important Notes Several known restrictions: - Separators would always be replaced with single quotation marks. All types of separators in Enso are supported though, and they would be correctly escaped if needed. - Logic for widget selection probably needs refinement (works for text literals and `Text` types, but does not work for `Text | Integer`, for example) - **(!)** There is a very annoying issue when the input field suddenly loses focus, closing the editing mode and discarding any changes. Debugging shows that it happens when we receive an engine update (and probably recreate the node component/widget tree (???)). It requires a separate investigation.
81 lines
2.6 KiB
Vue
81 lines
2.6 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 EnsoTextInputWidget from '@/components/widgets/EnsoTextInputWidget.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'])
|
|
</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 }">
|
|
<EnsoTextInputWidget v-model="text" />
|
|
|
|
<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"
|
|
:values="values"
|
|
:selectedValue="selectedValue"
|
|
@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>
|