fix(CFormSelect): add missing options property.

Author: mrholek

packages/coreui-vue/src/components/form/CFormSelect.ts

@@ -1,4 +1,10 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, PropType } from 'vue'
+
+type Option = {
+  disabled?: boolean
+  label?: string
+  value?: string
+}
 
 const CFormSelect = defineComponent({
   name: 'CFormSelect',
@@ -26,6 +32,17 @@ const CFormSelect = defineComponent({
       default: undefined,
       require: false,
     },
+    /**
+     * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+     * Examples:
+     * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
+     * - `:options="['js', 'html']"`
+     */
+    options: {
+      type: Array as PropType<Option[] | string[]>,
+      default: undefined,
+      required: false,
+    },
     /**
      * Size the component small or large.
      *
@@ -49,7 +66,7 @@ const CFormSelect = defineComponent({
   },
   emits: [
     /**
-     * Event occurs when when a user changes the selected option of a <select> element.
+     * Event occurs when when a user changes the selected option of a `<select>` element.
      */
     'change',
     /**
@@ -84,7 +101,19 @@ const CFormSelect = defineComponent({
           onChange: (event: InputEvent) => handleChange(event),
           size: props.htmlSize,
         },
-        slots.default && slots.default(),
+        props.options
+          ? props.options.map((option: Option | string) => {
+              return h(
+                'option',
+                {
+                  ...(typeof option === 'object' &&
+                    option.disabled && { disabled: option.disabled }),
+                  ...(typeof option === 'object' && option.value && { value: option.value }),
+                },
+                typeof option === 'string' ? option : option.label,
+              )
+            })
+          : slots.default && slots.default(),
       )
   },
 })

packages/docs/forms/select.md

@@ -7,19 +7,31 @@ description: Vue select component. Customize the native `<select>`s with custom
 ## Default
 
 ::: demo
-<CFormSelect aria-label="Default select example">
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</CFormSelect>
+<CFormSelect
+aria-label="Default select example"
+:options="[
+'Open this select menu',
+{ label: 'One', value: '1' },
+{ label: 'Two', value: '2' },
+{ label: 'Three', value: '3', disabled: true }]"></CFormSelect>
 :::
 ```vue
+<CFormSelect
+  aria-label="Default select example"
+  :options="[
+    'Open this select menu',
+    { label: 'One', value: '1' },
+    { label: 'Two', value: '2' },
+    { label: 'Three', value: '3', disabled: true }
+  ]">
+</CFormSelect>
+
+// You can also add options manually
 <CFormSelect aria-label="Default select example">
   <option>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
-  <option value="3">Three</option>
+  <option value="3" disabled>Three</option>
 </CFormSelect>
 ```