#139 implement native select

package.json

@@ -55,6 +55,7 @@
     "@govflanders/vl-ui-autocomplete": "^18.1.1",
     "@govflanders/vl-ui-design-system-style": "^1.0.0-alpha.3",
     "@govflanders/vl-ui-design-system-vue3": "^1.0.0-alpha.3",
+    "@govflanders/vl-ui-select": "^20.0.10",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
     "@tinymce/tinymce-vue": "^4",
     "@vuelidate/core": "^2.0.2",

src/components/dumb/OeSelect.vue

@@ -0,0 +1,80 @@
+<template>
+  <!-- <label for="vl-select-select-3" class="vl-form__label">
+    Kies een stad of land
+  </label> -->
+  <div @click="showResults = !showResults" class="js-vl-select" role="listbox" data-type="select-one" tabindex="0"
+    dir="ltr">
+    <div class="vl-select__inner">
+      <select name="vl-select-select-3" id="vl-select-select-3"
+        class="vl-select vl-select--block vl-input-field is-hidden" tabindex="-1" style="display:none;"
+        data-choice="active">
+        <option :value="selectedOption.value" selected>{{ selectedOption.label }}</option>
+      </select>
+      <div class="vl-input-field">
+        <div class="vl-select__item vl-select__item--selectable" data-item="" :data-id="selectedOption.value"
+          :data-value="selectedOption.value">
+          {{ selectedOption.label }}
+        </div>
+      </div>
+    </div>
+    <div v-if="showResults" class="vl-select__list vl-select__list--dropdown">
+      <div class="vl-select__list" dir="ltr" role="listbox">
+        <template v-for="option in options">
+          <div class="vl-select__item vl-select__item--choice vl-select__item--selectable"
+            :class="{ 'is-highlighted': option.selected, '': !option.selected }" data-select-text="Press to select"
+            data-choice="" :data-id="option.value" :data-value="option.value" data-choice-selectable="" :id="option.value"
+            role="treeitem" @click="selectOption(option)">
+            <div>
+              {{ option.label }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { ISelectOption } from '@models/select';
+import { ref } from 'vue';
+
+const showResults = ref<boolean>(false);
+
+const options = [
+  { label: 'België', value: 'België', selected: true },
+  { label: 'Frankrijk', value: 'Frankrijk', selected: false },
+  {
+    label: 'Duitsland - Land in Centraal-Europa. Het heeft een grondgebied van 357.022 km² en grenst in het noorden aan de Oostzee.',
+    value: 'Duitsland', selected: false
+  }
+
+] as ISelectOption[];
+
+const selectedOption = ref<ISelectOption>(options.find((option) => option.selected) as ISelectOption);
+
+const selectOption = (option: ISelectOption) => {
+  selectedOption.value = option;
+  options.forEach(option => option.selected = false);
+  selectedOption.value.selected = true;
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'pyoes/scss/base-variables';
+
+.js-vl-select {
+  & .vl-select__list--dropdown {
+    display: block !important;
+  }
+
+  & .vl-select__item.vl-select__item--choice.vl-select__item--selectable:hover {
+    background-color: $light-purple;
+  }
+
+  .vl-select__item.vl-select__item--choice.vl-select__item--selectable {
+    height: auto !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+}
+</style>

src/components/dumb/index.ts

@@ -11,6 +11,7 @@ import OeContainer from './OeContainer.vue';
 import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
 import OeLoader from './OeLoader.vue';
+import OeSelect from './OeSelect.vue';
 import OeTinyMce from './OeTinyMCE.vue';
 import OeWizard from './OeWizard.vue';
 import SystemFields from './SystemFields.vue';
@@ -29,6 +30,7 @@ export {
   OeGrid,
   OeHeader,
   OeLoader,
+  OeSelect,
   OeTinyMce,
   OeWizard,
   SystemFields,

src/models/select.ts

@@ -0,0 +1,5 @@
+export interface ISelectOption {
+  label: string;
+  value: string;
+  selected: boolean;
+}

src/scss/_override-variables.scss

@@ -33,6 +33,7 @@ $vl-icon-font-location: '@govflanders/vl-ui-design-system-style/assets/font/icon
 // Import core and custom component styling
 @import '@govflanders/vl-ui-core/src/scss/core';
 @import '@govflanders/vl-ui-autocomplete/src/scss/autocomplete';
+@import '@govflanders/vl-ui-select/src/scss/select';
 
 @import '@govflanders/vl-ui-design-system-style/scss';
 /**

src/stories/dumb-components/select.stories.ts

@@ -0,0 +1,115 @@
+import '@/scss/main.scss';
+import OeSelect from '../../components/dumb/OeSelect.vue';
+// import type { IAutocompleteOption } from '../../models/autocomplete';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+const meta: Meta<typeof OeSelect> = {
+  title: 'Dumb components/Select',
+  component: OeSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        height: '250px',
+      },
+    },
+  },
+  argTypes: {
+    // id: {
+    //   control: 'text',
+    //   description: 'Unique id for this autocomplete instance',
+    // },
+    // value: {
+    //   control: 'object',
+    //   description: 'Selected option',
+    //   table: {
+    //     type: { summary: 'IAutocompleteOption' },
+    //     defaultValue: { summary: 'undefined' },
+    //   },
+    // },
+    // autoselect: {
+    //   control: 'boolean',
+    //   description: 'Whether to autoselect the option if only 1 result is left',
+    // },
+    // minChars: {
+    //   control: 'number',
+    //   description: 'Number of characters needed before callbackFn is triggered',
+    // },
+    // placeholder: {
+    //   control: 'text',
+    //   description: 'Placeholder text',
+    // },
+    // callbackFn: {
+    //   control: 'function',
+    //   description: 'Callback function that provides the options',
+    //   table: {
+    //     type: { summary: 'Should return IAutocompleteOption[]' },
+    //   },
+    // },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OeSelect>;
+
+export const Default: Story = {};
+
+// export const CustomCallbackFunction: Story = {
+//   render: () => ({
+//     components: {
+//       OeSelect,
+//     },
+//     setup() {
+//       const callback = (s: string): Promise<IAutocompleteOption[]> => {
+//         return new Promise(function (resolve) {
+//           // Fake delay to show the loader
+//           setTimeout(function () {
+//             resolve([
+//               {
+//                 title: s,
+//               },
+//               {
+//                 title: 'dummy',
+//               },
+//             ]);
+//           }, 3000);
+//         });
+//       };
+
+//       return { callback };
+//     },
+//     template: `<oe-autocomplete :callbackFn="callback"></oe-autocomplete>`,
+//   }),
+// };
+
+export const Autoselect: Story = {
+  render: () => ({
+    components: {
+      OeSelect,
+    },
+    // setup() {
+    //   const callback = (): Promise<IAutocompleteOption[]> => {
+    //     return new Promise(function (resolve) {
+    //       // Fake delay to show the loader
+    //       setTimeout(function () {
+    //         resolve([
+    //           {
+    //             title: 'dummy',
+    //           },
+    //         ]);
+    //       }, 3000);
+    //     });
+    //   };
+
+    //   return { callback };
+    // },
+    template: `<oe-select></oe-select>`,
+  }),
+  //   parameters: {
+  //     docs: {
+  //       description: {
+  //         story: 'Search for "dum" to have 1 result.',
+  //       },
+  //     },
+  //   },
+};