refactor(Options): Merge pull request #31 from DanielleHuisman/fix/option-defaults

Remove defaults for optionLabel and optionValue props

BREAKING CHANGE: OptionLabel or OptionValue has to be set

Author: sfxcode

src/formkit/PrimeDropdown.vue

@@ -31,8 +31,8 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :aria-label="attrs.ariaLabel"
       :aria-labelledby="attrs.ariaLabelledby"
       :options="attrs.options"
-      :option-label="attrs.optionLabel ?? 'label'"
-      :option-value="attrs.optionValue ?? 'value'"
+      :option-label="attrs.optionLabel"
+      :option-value="attrs.optionValue"
       :option-disabled="attrs.optionDisabled"
       :option-group-label="attrs.optionGroupLabel"
       :option-group-children="attrs.optionGroupChildren"

src/formkit/PrimeListbox.vue

@@ -26,8 +26,8 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :aria-label="attrs.ariaLabel"
       :aria-labelledby="attrs.ariaLabelledby"
       :options="attrs?.options"
-      :option-label="attrs.optionLabel ?? 'label'"
-      :option-value="attrs.optionValue ?? 'value'"
+      :option-label="attrs.optionLabel"
+      :option-value="attrs.optionValue"
       :multiple="attrs.multiple ?? false"
       :filter="attrs.filter ?? false"
       :filter-icon="attrs.filterIcon"

src/formkit/PrimeMultiSelect.vue

@@ -27,8 +27,8 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :aria-labelledby="attrs.ariaLabelledby"
       :placeholder="attrs.placeholder"
       :options="attrs.options"
-      :option-label="attrs.optionLabel ?? 'label'"
-      :option-value="attrs.optionValue ?? 'value'"
+      :option-label="attrs.optionLabel"
+      :option-value="attrs.optionValue"
       :option-disabled="attrs.optionDisabled"
       :option-group-label="attrs.optionGroupLabel"
       :option-group-children="attrs.optionGroupChildren"

src/formkit/PrimeSelectButton.vue

@@ -26,8 +26,8 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :aria-label="attrs.ariaLabel"
       :aria-labelledby="attrs.ariaLabelledby"
       :options="attrs.options"
-      :option-label="attrs.optionLabel ?? 'label'"
-      :option-value="attrs.optionValue ?? 'value'"
+      :option-label="attrs.optionLabel"
+      :option-value="attrs.optionValue"
       :option-disabled="attrs.optionDisabled"
       :multiple="attrs.multiple ?? false"
       :unselectable="attrs.unselectable ?? true"

src/pages/demo/Dropdown.vue

@@ -16,6 +16,8 @@ const schema
       name: 'cookie_notice',
       label: 'Cookie notice Dropdown',
       value: 'hourly',
+      optionLabel: 'label',
+      optionValue: 'value',
       options,
       help: 'Cookie notice frequency ?',
     },
@@ -26,6 +28,8 @@ const schema
       value: 'hourly',
       style: 'background:gray;',
       class: 'customClass',
+      optionLabel: 'label',
+      optionValue: 'value',
       options: [
         { label: 'Every page load', value: 'refresh' },
         { label: 'Every hour', value: 'hourly' },
@@ -40,6 +44,8 @@ const schema
       showClear: true,
       filter: true,
       placeholder: 'Please select',
+      optionLabel: 'label',
+      optionValue: 'value',
       options,
       validation: 'required',
     },

src/pages/demo/Listbox.vue

@@ -16,6 +16,8 @@ const schema
       name: 'cookie_notice',
       label: 'Cookie notice Dropdown',
       value: 'hourly',
+      optionLabel: 'label',
+      optionValue: 'value',
       options,
       help: 'Cookie notice frequency ?',
     },
@@ -26,6 +28,8 @@ const schema
       value: 'hourly',
       style: 'background:gray;',
       class: 'customClass',
+      optionLabel: 'label',
+      optionValue: 'value',
       options: [
         { label: 'Every page load', value: 'refresh' },
         { label: 'Every hour', value: 'hourly' },
@@ -40,6 +44,8 @@ const schema
       multiple: true,
       filter: true,
       placeholder: 'Please select',
+      optionLabel: 'label',
+      optionValue: 'value',
       options,
       validation: 'required',
     },

src/pages/demo/MultiSelect.vue

@@ -15,6 +15,8 @@ const schema
       $formkit: 'primeMultiSelect',
       name: 'cookie_notice',
       label: 'Cookie notice MultiSelect',
+      optionLabel: 'label',
+      optionValue: 'value',
       options,
       help: 'Cookie notice frequency ?',
     },
@@ -24,6 +26,8 @@ const schema
       label: 'Styled',
       style: 'background:gray;',
       class: 'customClass',
+      optionLabel: 'label',
+      optionValue: 'value',
       options: [
         { label: 'Every page load', value: 'refresh' },
         { label: 'Every hour', value: 'hourly' },
@@ -37,6 +41,8 @@ const schema
       label: 'With Multiple Select and Filter',
       filter: true,
       placeholder: 'Please select',
+      optionLabel: 'label',
+      optionValue: 'value',
       options,
       validation: 'required',
     },

src/pages/demo/RadioButton.vue

@@ -11,6 +11,8 @@ const schema
       name: 'basic',
       options_class: 'mt-1 flex flex-col space-y-2',
       option_class: 'flex space-x-2',
+      optionLabel: 'label',
+      optionValue: 'value',
       options: [
         { label: 'Every page load', value: 'refresh' },
         { label: 'Every hour', value: 'hourly' },

src/pages/demo/SelectButton.vue

@@ -22,13 +22,17 @@ const schema
       label: 'SelectButton',
       name: 'selectButton',
       options: selectOptions,
+      optionLabel: 'label',
+      optionValue: 'value',
       value: 'MAYBE',
       unselectable: false,
     },
     {
       $formkit: 'primeSelectButton',
       label: 'Contact options',
       name: 'selectButtonMultiple',
+      optionLabel: 'label',
+      optionValue: 'value',
       options: selectOptions2,
       multiple: true,
     },