sprintify-ui 0.0.134 → 0.0.136

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

@@ -6,7 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Option | undefined>;
     };
     name: {
-        required: true;
+        default: undefined;
         type: StringConstructor;
     };
     required: {
@@ -47,7 +47,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Option | undefined>;
     };
     name: {
-        required: true;
+        default: undefined;
         type: StringConstructor;
     };
     required: {
@@ -86,6 +86,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
+    name: string;
     disabled: boolean;
     modelValue: Option | undefined;
     hasError: boolean;

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { Option } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
@@ -24,6 +25,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    options: {
+        default: undefined;
+        type: PropType<Option[]>;
+    };
+    labelKey: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    valueKey: {
+        default: undefined;
+        type: StringConstructor;
+    };
 }, {}, 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;
@@ -49,14 +62,29 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    options: {
+        default: undefined;
+        type: PropType<Option[]>;
+    };
+    labelKey: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    valueKey: {
+        default: undefined;
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     name: string;
+    options: Option[];
     disabled: boolean;
     placeholder: string;
     modelValue: (string | number | null) | undefined;
+    labelKey: string;
+    valueKey: string;
     hasError: boolean;
 }>, {
     default: (_: {}) => any;

package/dist/types/src/index.d.ts

@@ -5,6 +5,7 @@ import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
+import { useField } from './composables/field';
 declare const messages: {
     en: {
         sui: {
@@ -300,3 +301,4 @@ export { useDialogsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
 export { useClickOutside };
+export { useField };

package/package.json

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

package/src/components/BaseRadioGroup.stories.js

@@ -7,7 +7,6 @@ export default {
   component: BaseRadioGroup,
   argTypes: {},
   args: {
-    name: 'character',
     labelKey: 'label',
     valueKey: 'value',
     options: options,

package/src/components/BaseRadioGroup.vue

@@ -36,6 +36,7 @@ import { PropType } from 'vue';
 import { Option } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
+import { uniqueId } from 'lodash';
 
 const props = defineProps({
   modelValue: {
@@ -43,7 +44,7 @@ const props = defineProps({
     type: [Object, null] as PropType<Option | undefined>,
   },
   name: {
-    required: true,
+    default: undefined,
     type: String,
   },
   required: {
@@ -82,8 +83,18 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
+const dummyName = uniqueId('base-radio-');
+
+const normalizedName = computed<string>(() => {
+  if (props.name) {
+    return props.name;
+  }
+
+  return dummyName;
+});
+
 const { nameInternal, requiredInternal, emitUpdate } = useField({
-  name: computed(() => props.name),
+  name: normalizedName,
   required: computed(() => props.required),
   hasError: computed(() => props.hasError),
   emit: emit,

package/src/components/BaseSelect.stories.js

@@ -2,6 +2,8 @@ import BaseSelect from './BaseSelect.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '../../.storybook/utils.js';
+import { options } from '../../.storybook/utils';
+import { computed } from 'vue';
 
 export default {
   title: 'Form/BaseSelect',
@@ -76,6 +78,34 @@ Disabled.args = {
   disabled: true,
 };
 
+export const OptionsAsProps = (args) => ({
+  components: { BaseSelect, ShowValue },
+  setup() {
+    const value = ref('test');
+    const showTest = ref(false);
+
+    setTimeout(() => {
+      showTest.value = true;
+    }, 3000);
+
+    const options2 = computed(() => {
+      if (!showTest.value) {
+        return options;
+      }
+      return [...options, { label: 'Test', value: 'test' }];
+    });
+    return { args, options2, value };
+  },
+  template: `<BaseSelect v-model="value" v-bind="args" class="w-full" :options="options2"></BaseSelect>
+  <ShowValue :value="value" />`,
+});
+
+OptionsAsProps.args = {
+  required: true,
+  labelKey: 'label',
+  valueKey: 'value',
+};
+
 export const Field = createFieldStory({
   component: BaseSelect,
   componentName: 'BaseSelect',

package/src/components/BaseSelect.vue

@@ -22,17 +22,29 @@
         {{ placeholder ? placeholder : $t('sui.select_an_option') }}
       </option>
     </template>
-    <slot />
+
+    <slot>
+      <template v-if="normalizedOptions && normalizedOptions.length">
+        <option
+          v-for="option in normalizedOptions"
+          :key="option.value ?? 'null'"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </template>
+    </slot>
   </select>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { get, isEqual } from 'lodash';
+import { get, isArray, isEqual } from 'lodash';
 import { useMutationObserver } from '@vueuse/core';
 import { useField } from '@/composables/field';
+import { NormalizedOption, OptionValue, Option } from '@/types';
 
-type Option = string | number | null;
+type SelectOption = string | number | null;
 
 const EMPTY_VALUE_INTERNAL = '';
 const EMPTY_VALUE_EXTERNAL = null;
@@ -40,7 +52,7 @@ const EMPTY_VALUE_EXTERNAL = null;
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [String, Number, null] as PropType<Option | undefined>,
+    type: [String, Number, null] as PropType<SelectOption | undefined>,
   },
   name: {
     default: undefined,
@@ -62,6 +74,18 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  options: {
+    default: undefined,
+    type: Array as PropType<Option[]>,
+  },
+  labelKey: {
+    default: undefined,
+    type: String,
+  },
+  valueKey: {
+    default: undefined,
+    type: String,
+  },
 });
 
 const select = ref<HTMLSelectElement | null>(null);
@@ -134,9 +158,11 @@ function checkIfModelValueIsValid(): boolean {
     return true;
   }
 
-  return (
-    options.value.findIndex((o) => isEqual(o.value, props.modelValue)) != -1
-  );
+  if (props.options && props.options.length) {
+    return props.options.some((o) => isEqual(o.value, props.modelValue));
+  }
+
+  return options.value.some((o) => isEqual(o.value, props.modelValue));
 }
 
 /**
@@ -158,4 +184,34 @@ function onChange(event: Event) {
 
   emitUpdate(value);
 }
+
+watchEffect(() => {
+  if (isArray(props.options) && (!props.labelKey || !props.valueKey)) {
+    console.error(
+      'BaseSelect: labelKey and valueKey are required when options is an array'
+    );
+  }
+});
+
+const normalizedOptions = computed<NormalizedOption[] | undefined>(() => {
+  if (!props.options) {
+    return undefined;
+  }
+
+  if (!props.labelKey) {
+    return undefined;
+  }
+
+  if (!props.valueKey) {
+    return undefined;
+  }
+
+  return props.options.map((option) => {
+    return {
+      label: option[props.labelKey as string] as string,
+      value: option[props.valueKey as string] as OptionValue,
+      option: option,
+    } as NormalizedOption;
+  });
+});
 </script>

package/src/index.ts

@@ -9,6 +9,7 @@ import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
+import { useField } from './composables/field';
 
 const messages = { en, fr };
 
@@ -93,3 +94,4 @@ export { useDialogsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
 export { useClickOutside };
+export { useField };