fix(#3582): move back label prop (#3595)

epicmaxco · Jul 11, 2023 · 71830b2 · 71830b2
1 parent 93566b4
commit 71830b2
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 6 deletions.
diff --git a/packages/ui/src/components/va-radio/VaRadio.demo.vue b/packages/ui/src/components/va-radio/VaRadio.demo.vue
@@ -56,6 +56,53 @@
         v-model="selectedOption"
         :options="options"
         :rules="rules"
+        value-by="value"
+      />
+    </VbCard>
+    <VbCard title="Single option">
+      <va-radio
+        v-model="selectedOption"
+        :option="options[0]"
+        :rules="rules"
+        value-by="value"
+      />
+      <va-radio
+        v-model="selectedOption"
+        :option="options[1]"
+        :rules="rules"
+        value-by="value"
+      />
+      <va-radio
+        v-model="selectedOption"
+        :option="options[2]"
+        :rules="rules"
+        value-by="value"
+      />
+    </VbCard>
+
+    <VbCard title="Label prop">
+      <va-radio
+        v-model="selectedOption"
+        :option="options[0]"
+        label="1"
+      />
+      <va-radio
+        v-model="selectedOption"
+        :option="options[1]"
+        label="2"
+      />
+      <va-radio
+        v-model="selectedOption"
+        :option="options[2]"
+        label="3"
+      />
+      <p>{{ selectedOption }}</p>
+    </VbCard>
+    <VbCard title="No label">
+      <va-radio
+        v-model="selectedOption"
+        :option="options[0]"
+        label=""
       />
     </VbCard>
   </VbDemo>
@@ -70,9 +117,9 @@ export default {
   data () {
     return {
       options: [
-        { value: 'one', label: 'one' },
-        { value: 'two', label: 'two' },
-        { value: 'three', label: 'three' },
+        { value: 'one', text: 'one' },
+        { value: 'two', text: 'two' },
+        { value: 'three', text: 'three' },
       ],
       selectedOptionString: 'one',
 

diff --git a/packages/ui/src/components/va-radio/VaRadio.vue b/packages/ui/src/components/va-radio/VaRadio.vue
@@ -99,9 +99,9 @@ export default defineComponent({
       default: () => [],
     },
     name: { type: String, default: '' },
+    label: { type: String, default: undefined },
     leftLabel: { type: Boolean, default: false },
     color: { type: String, default: 'primary' },
-
     option: {
       type: [Object, String, Number] as PropType<VaRadioOption>,
       default: undefined,
@@ -123,8 +123,13 @@ export default defineComponent({
       onFocus,
     } = useSelectable(props, emit, elements)
 
-    const { getText, getValue, getDisabled: originalGetDisabled } = useSelectableList(props)
+    const { getText: originalGetText, getDisabled: originalGetDisabled, getValue } = useSelectableList(props)
+
+    const getText = (option: Parameters<typeof originalGetText>[0]) => {
+      if (props.options.length > 0) { return originalGetText(option) }
 
+      return props.label ?? originalGetText(option)
+    }
     const getDisabled = (option: Parameters<typeof originalGetDisabled>[0]) => originalGetDisabled(option) || props.disabled
 
     const isNoOption = computed(() => props.options.length === 0 && !props.option)
@@ -259,6 +264,10 @@ export default defineComponent({
     margin-top: 0.5rem;
   }
 
+  .va-radio:last-child {
+    margin: 0;
+  }
+
   &--disabled {
     cursor: var(--va-radio-disabled-cursor);
   }

diff --git a/packages/ui/src/composables/useSelectable.ts b/packages/ui/src/composables/useSelectable.ts
@@ -8,7 +8,6 @@ import { unwrapEl } from '../utils/unwrapEl'
 
 export type SelectableProps<V = any> = StatefulProps & LoadingProps & ExtractPropTypes<ValidationProps<V>> & {
   arrayValue: V | undefined,
-  label: string,
   leftLabel: boolean,
   trueValue: any,
   falseValue: any,