sprintify-ui 0.0.138 → 0.0.140

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

@@ -1,7 +1,7 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     contrast: 'low' | 'high';
     color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
-    size: 'base' | 'lg';
+    size: 'sm' | 'base' | 'lg';
     icon?: string | undefined;
 }>, {
     contrast: string;
@@ -11,7 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     contrast: 'low' | 'high';
     color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
-    size: 'base' | 'lg';
+    size: 'sm' | 'base' | 'lg';
     icon?: string | undefined;
 }>, {
     contrast: string;
@@ -21,7 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
     icon: string;
-    size: 'base' | 'lg';
+    size: 'sm' | 'base' | 'lg';
     contrast: 'low' | 'high';
 }>, {
     default: (_: {}) => any;

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.138",
+  "version": "0.0.140",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseBadge.stories.js

@@ -14,7 +14,7 @@ const colors = [
   '#dbeafe',
 ];
 
-const sizes = ['base', 'lg'];
+const sizes = ['sm', 'base', 'lg'];
 
 export default {
   title: 'Components/BaseBadge',

package/src/components/BaseBadge.vue

@@ -26,7 +26,7 @@ const props = withDefaults(
       | 'purple'
       | 'pink'
       | string;
-    size: 'base' | 'lg';
+    size: 'sm' | 'base' | 'lg';
     icon?: string;
   }>(),
   {
@@ -118,6 +118,9 @@ const colorStyle = computed((): Record<string, string> => {
 });
 
 const sizeClasses = computed(() => {
+  if (props.size == 'sm') {
+    return 'px-2 py-px text-[11px]';
+  }
   if (props.size == 'base') {
     return 'px-2.5 py-0.5 text-xs';
   }
@@ -128,6 +131,9 @@ const sizeClasses = computed(() => {
 });
 
 const iconSizeClasses = computed(() => {
+  if (props.size == 'sm') {
+    return 'h-2.5 w-2.5 mr-1 -ml-px';
+  }
   if (props.size == 'base') {
     return 'h-3 w-3 mr-1 -ml-0.5';
   }

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>