sprintify-ui 0.0.139 → 0.0.141

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.141",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -22,7 +22,7 @@
     "humanize-duration": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
-    "maska": "^2.1.1",
+    "maska": "^2.1.3",
     "microtip": "^0.2.2",
     "object-to-formdata": "^4.4.2",
     "pikaday": "^1.8.2",

package/src/components/BaseInput.vue

@@ -19,29 +19,8 @@
     >
       {{ prefix }}
     </div>
-    <input
-      ref="input"
-      v-maska:[maskOptions]
-      :value="modelValue"
-      :type="type"
-      :name="nameInternal"
-      :step="step"
-      :min="min"
-      :max="max"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :required="requiredInternal"
-      class="w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
-      :class="{
-        'rounded-l': !iconLeft && !prefix,
-        'rounded-r': !iconRight && !suffix,
-      }"
-      :autocomplete="autocomplete ? 'on' : 'off'"
-      @keydown.enter="onEnter"
-      @input="emitUpdate(transformInputValue($event))"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
-    />
+    <input v-if="hasMask" ref="input" v-maska:[maskOptions] v-bind="bindings" />
+    <input v-else ref="input" v-bind="bindings" />
     <div
       v-if="suffix"
       class="flex shrink-0 items-center justify-center border-l px-4 transition-colors"
@@ -65,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { get, isString } from 'lodash';
+import { get } from 'lodash';
 import { PropType } from 'vue';
 import { BaseIcon } from '@/index';
 import { useField } from '@/composables/field';
@@ -156,6 +135,37 @@ const maskOptions = computed(() => {
   return undefined;
 });
 
+const hasMask = computed(() => {
+  return !!props.mask;
+});
+
+const bindings = computed<any>(() => {
+  return {
+    value: props.modelValue,
+    type: props.type,
+    name: nameInternal.value,
+    step: props.step,
+    min: props.min,
+    max: props.max,
+    disabled: props.disabled,
+    placeholder: props.placeholder,
+    required: requiredInternal.value,
+    autocomplete: props.autocomplete ? 'on' : 'off',
+    class: {
+      'rounded-l': !props.iconLeft && !props.prefix,
+      'rounded-r': !props.iconRight && !props.suffix,
+      'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300':
+        true,
+    },
+    onKeydown: {
+      enter: onEnter,
+    },
+    onInput: update,
+    onFocus: (e: Event) => emit('focus', e),
+    onBlur: (e: Event) => emit('blur', e),
+  };
+});
+
 const maskInternal = computed(() => {
   if (props.mask === 'phone') {
     return '(###) ###-####';
@@ -186,18 +196,12 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
-function transformInputValue(event: Event | null): string | null {
+function update(event: any | null) {
   if (event === null) {
-    return null;
-  }
-
-  const value = get(event, 'target.value', null);
-
-  if (isString(value)) {
-    return value;
+    emitUpdate(null);
   }
 
-  return '';
+  return emitUpdate(get(event, 'target.value', ''));
 }
 
 function onEnter(e: Event) {

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>