docs(playground): DLT-3242 segmented control for compact enum props (#1165)

Author: francisrupert

packages/combinator/src/components/controls/control_segmented.vue

@@ -0,0 +1,81 @@
+<template>
+  <dt-text
+    kind="label"
+    :size="100"
+    tone="secondary"
+    class="d-input__label-text d-c-default"
+  >
+    <slot />
+  </dt-text>
+  <dt-segmented-control
+    :model-value="String(value)"
+    :size="100"
+    :disabled="disabled"
+    @change="onInput"
+  >
+    <dt-segmented-control-item
+      v-for="option in options"
+      :key="option.value"
+      :value="String(option.value)"
+    >
+      {{ option.label }}
+    </dt-segmented-control-item>
+  </dt-segmented-control>
+</template>
+
+<script setup>
+import { DtSegmentedControl, DtSegmentedControlItem, DtText } from '@dialpad/dialtone-vue';
+
+import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: undefined,
+    required: true,
+  },
+  validValues: {
+    type: Array,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  generateLabel: {
+    type: Function,
+    default: (value) => value.toString(),
+  },
+});
+
+const emit = defineEmits([VALUE_UPDATE_EVENT]);
+
+const options = computed(() => {
+  return props.validValues?.map(v => ({
+    value: v,
+    label: props.generateLabel(v),
+  })) ?? [];
+});
+
+// DtSegmentedControl coerces values to strings — map back to original types on selection
+const valueMap = computed(() => {
+  const map = {};
+  props.validValues?.forEach(v => {
+    map[String(v)] = v;
+  });
+  return map;
+});
+
+function onInput (stringValue) {
+  emit(VALUE_UPDATE_EVENT, valueMap.value[stringValue]);
+}
+</script>
+
+<script>
+/**
+ * Control that renders a segmented control for enum props with few, short options.
+ */
+export default {
+  name: 'DtcControlSegmented',
+};
+</script>

packages/combinator/src/lib/control.js

@@ -14,9 +14,13 @@ import DtcControlString from '@/src/components/controls/control_string.vue';
 import DtcControlNullish from '@/src/components/controls/control_nullish.vue';
 import DtcControlBase from '@/src/components/controls/control_base.vue';
 import DtcControlIconSlot from '@/src/components/controls/control_icon_slot.vue';
+import DtcControlSegmented from '@/src/components/controls/control_segmented.vue';
 
 import { typeOfMemberValue } from '@/src/lib/utils';
 
+const MAX_SEGMENTED_COUNT = 6;
+const MAX_SEGMENTED_LABEL_LENGTH = 4;
+
 /**
  * Symbol representing a value that is "not set".
  * The main usage is to indicate that a prop value should be 'undefined' instead of using its default value.
@@ -58,6 +62,10 @@ export const controlMap = Object.freeze({
     component: DtcControlSelection,
     default ({ values } = {}) { return values?.[0]; },
   },
+  segmented: {
+    component: DtcControlSegmented,
+    default ({ values } = {}) { return values?.[0]; },
+  },
   string: {
     component: DtcControlString,
     default () { return getControlDataDefault(this); },
@@ -102,6 +110,7 @@ export function getControlByValue (value) {
 export function getControlByMemberType (type, args) {
   if (type === 'boolean') return 'boolean';
   if (args?.values?.length > 0) {
+    if (shouldUseSegmented(args.values)) return 'segmented';
     return 'selection';
   }
   switch (type) {
@@ -110,6 +119,11 @@ export function getControlByMemberType (type, args) {
   }
 }
 
+function shouldUseSegmented (values) {
+  return values.length <= MAX_SEGMENTED_COUNT &&
+    values.every(v => String(v).length <= MAX_SEGMENTED_LABEL_LENGTH);
+}
+
 /**
  * Serializes a value before giving it to a control that requires a serialized value.
  * Currently, this only converts between 'UNSET' and 'undefined'.