sprintify-ui 0.0.139 → 0.0.140

package/dist/types/src/components/BaseRadioGroup.vue.d.ts

@@ -1,9 +1,9 @@
 import { PropType } from 'vue';
-import { Option } from '@/types';
+import { NormalizedOption, Option, OptionValue } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
-        type: PropType<Option | undefined>;
+        type: PropType<OptionValue | undefined>;
     };
     name: {
         default: undefined;
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
-        type: PropType<Option | undefined>;
+        type: PropType<OptionValue | undefined>;
     };
     name: {
         default: undefined;
@@ -88,13 +88,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     name: string;
     disabled: boolean;
-    modelValue: Option | undefined;
+    modelValue: OptionValue | undefined;
     hasError: boolean;
     inputClass: string;
     labelClass: string;
 }>, {
     option: (_: {
-        option: import("@/types").NormalizedOption;
+        option: NormalizedOption;
     }) => any;
 }>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseRadioGroup.stories.js

@@ -1,6 +1,7 @@
 import { options } from '../../.storybook/utils';
 import BaseRadioGroup from './BaseRadioGroup.vue';
 import { createFieldStory } from '@/../.storybook/utils';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
 
 export default {
   title: 'Form/BaseRadioGroup',
@@ -15,9 +16,9 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseRadioGroup },
+  components: { BaseRadioGroup, ShowValue },
   setup() {
-    const value = ref(null);
+    const value = ref(options[0].value);
     function onSubmit() {
       alert('submit');
     }
@@ -27,7 +28,7 @@ const Template = (args) => ({
   <form @submit.prevent="onSubmit">
     <BaseRadioGroup v-model="value" v-bind="args"></BaseRadioGroup>
     <button type="submit" class="btn btn-primary mt-4">Submit</button>
-    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+    <ShowValue :value="value">{{ value }}</ShowValue>
   </form>
   `,
 });
@@ -43,7 +44,6 @@ Required.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
-  modelValue: { label: 'Dark Maul', value: 'darth_maul' },
 };
 
 export const SlotOption = (args) => ({

package/src/components/BaseRadioGroup.vue

@@ -14,12 +14,12 @@
             :id="name + '-' + option.value"
             type="radio"
             :name="nameInternal"
-            :checked="isSelected(option)"
+            :checked="isChecked(option)"
             :required="requiredInternal"
             :disabled="disabled"
             :value="option.value"
             :class="inputClass"
-            @input="emitUpdate(option.option)"
+            @input="emitUpdate(option.value)"
           />
 
           <slot name="option" :option="option">
@@ -33,15 +33,16 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { Option } from '@/types';
-import { useHasOptions } from '@/composables/hasOptions';
+import { NormalizedOption, Option, OptionValue } from '@/types';
 import { useField } from '@/composables/field';
 import { uniqueId } from 'lodash';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [Object, null] as PropType<Option | undefined>,
+    type: [String, Number, null, undefined] as PropType<
+      OptionValue | undefined
+    >,
   },
   name: {
     default: undefined,
@@ -102,11 +103,20 @@ const { nameInternal, requiredInternal, emitUpdate } = useField({
   labelClass: 'mb-3 font-medium',
 });
 
-const { normalizedOptions, isSelected } = useHasOptions(
-  computed(() => props.modelValue),
-  computed(() => props.options),
-  computed(() => props.labelKey),
-  computed(() => props.valueKey),
-  computed(() => false)
-);
+function isChecked(option: NormalizedOption): boolean {
+  if (props.modelValue) {
+    return props.modelValue == option.value;
+  }
+  return false;
+}
+
+const normalizedOptions = computed((): NormalizedOption[] => {
+  return props.options.map((option) => {
+    return {
+      label: option[props.labelKey] as string,
+      value: option[props.valueKey] as string | number,
+      option: option,
+    } as NormalizedOption;
+  });
+});
 </script>