sprintify-ui 0.0.118 → 0.0.119

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

@@ -1,9 +1,8 @@
 import { PropType } from 'vue';
-import { Option } from '@/types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
-        type: PropType<Option | Option[] | null | undefined>;
+        type: PropType<string[] | null | undefined>;
     };
     required: {
         default: boolean;
@@ -25,10 +24,18 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }, {}, 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 | Option[] | null | undefined>;
+        type: PropType<string[] | null | undefined>;
     };
     required: {
         default: boolean;
@@ -50,13 +57,23 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
+    name: string;
     disabled: boolean;
     multiple: boolean;
-    modelValue: Option | Option[] | null | undefined;
+    modelValue: string[] | null | undefined;
+    hasError: boolean;
     buttonType: "button" | "submit";
     colors: string[];
 }>;

package/package.json

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

package/src/components/BaseColor.stories.js

@@ -40,7 +40,7 @@ Multiple.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
-  modelValue: { label: '#16a34a', value: '#16a34a' },
+  modelValue: '#16a34a',
 };
 
 export const Field = createFieldStory({

package/src/components/BaseColor.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <BaseButtonGroup
-      :model-value="modelValue"
+      :model-value="normalizeModelValue"
       :disabled="disabled"
       value-key="value"
       label-key="label"
@@ -12,7 +12,7 @@
       :button-class="''"
       :button-selected-class="''"
       :button-unselected-class="''"
-      @update:model-value="$emit('update:modelValue', $event)"
+      @update:model-value="(value) => transformModelValue(value)"
     >
       <template #option="option">
         <div
@@ -32,14 +32,16 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { Option } from '@/types';
 import { BaseButtonGroup } from '.';
+import { isArray } from 'lodash';
+import { useField } from '@/composables/field';
+import { Option } from '@/types';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [Object, Array, null, undefined] as PropType<
-      Option[] | Option | null | undefined
+    type: [String, Array, null, undefined] as PropType<
+      string[] | string[] | null | undefined
     >,
   },
   required: {
@@ -76,9 +78,17 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
 const colorOptions = computed(() => {
   return props.colors.map((c) => {
@@ -88,4 +98,52 @@ const colorOptions = computed(() => {
     };
   });
 });
+
+const normalizeModelValue = computed(() => {
+  return isArray(props.modelValue)
+    ? props.modelValue?.map((m) => {
+        return {
+          label: m,
+          value: m,
+        };
+      })
+    : {
+        label: props.modelValue,
+        value: props.modelValue,
+      };
+});
+
+const { emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+function transformModelValue(payload: Option | Option[] | null) {
+  if (props.multiple) {
+    let newModalValue = [] as string[];
+
+    if (isArray(payload)) {
+      newModalValue = payload.map((option) => {
+        return option.value;
+      });
+    }
+
+    emitUpdate(newModalValue);
+  } else {
+    if (payload == null) {
+      emitUpdate(null);
+      return;
+    }
+
+    if (isArray(payload)) {
+      emitUpdate(null);
+      return;
+    }
+
+    const newOption = payload.value;
+    emitUpdate(newOption);
+  }
+}
 </script>