Add Vocabulary Select implementation instead of buefy select

Author: obulat

src/App.vue

@@ -140,11 +140,10 @@ export default {
     @import "~bulma";
     @import '~buefy/src/scss/utils/_variables.scss';
     @import '~buefy/src/scss/components/_modal.scss';
-    @import '~buefy/src/scss/components/_select.scss';
     @import '~buefy/src/scss/components/_form.scss';
     @import '~buefy/src/scss/components/_icon.scss';
 
-    @import "@creativecommons/vocabulary/scss/vocabulary.scss";
+    @import "~@creativecommons/vocabulary/scss/vocabulary.scss";
 
     #app {
         -webkit-font-smoothing: antialiased;

src/Vocabulary/VSelect.vue

@@ -0,0 +1,80 @@
+<template>
+    <div
+        class="control"
+        :class="{ 'is-expanded': expanded }"
+    >
+        <span
+            class="select"
+            :class="spanClasses"
+        >
+            <select
+                ref="select"
+                v-model="computedValue"
+                v-bind="$attrs"
+                @blur="$emit('blur', $event)"
+                @focus="$emit('focus', $event)"
+            >
+                <template v-if="placeholder">
+                    <option
+                        v-if="computedValue == null"
+                        :value="null"
+                        disabled
+                        hidden
+                    >
+                        {{ placeholder }}
+                    </option>
+                </template>
+                <slot />
+            </select>
+        </span>
+        <slot name="left-icon" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'VSelect',
+    inheritAttrs: false,
+    props: {
+        value: {
+            type: [String, Number],
+            default: null
+        },
+        placeholder: String,
+        expanded: Boolean
+    },
+    data() {
+        return {
+            selected: this.value,
+            elementRef: 'select'
+        }
+    },
+    computed: {
+        computedValue: {
+            get() {
+                return this.selected
+            },
+            set(value) {
+                this.selected = value
+                this.$emit('input', value)
+            }
+        },
+        spanClasses() {
+            return [this.size, this.statusType, {
+                'is-fullwidth': this.expanded,
+                'is-empty': this.selected === null
+            }]
+        }
+    },
+    watch: {
+        /**
+         * When v-model is changed:
+         *   1. Set the selected option.
+         *   2. If it's invalid, validate again.
+         */
+        value(value) {
+            this.selected = value
+        }
+    }
+}
+</script>

src/components/DropdownStep.vue

@@ -1,33 +1,29 @@
 <template>
     <div class="step-actions">
-        <b-field class="license-dropdown">
-            <b-select
-                :placeholder="this.$t('stepper.DD.placeholder')"
-                :value="shortName"
-                @input="setCurrentLicense"
+        <v-select
+            class="license-dropdown"
+            :placeholder="$t('stepper.DD.placeholder')"
+            :value="shortName"
+            @input="setCurrentLicense"
+        >
+            <option
+                v-for="license in licenseList"
+                :key="license"
+                :value="license"
             >
-                <option
-                    v-for="license in licenseList"
-                    :key="license"
-                    :value="license"
-                >
-                    {{ license }}
-                </option>
-            </b-select>
-        </b-field>
+                {{ license }}
+            </option>
+        </v-select>
     </div>
 </template>
 <script>
 import { mapGetters } from 'vuex'
+import VSelect from '@/Vocabulary/VSelect'
 export default {
     name: 'DropdownStep',
+    components: { VSelect },
+    inheritAttrs: false,
     props: {
-        status: {
-            type: String,
-            validator(value) {
-                return ['active', 'previous', 'inactive'].includes(value)
-            }
-        },
         id: Number
     },
     data() {