<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/creativecommons/chooser/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From 6f09c179a352af6b2ea71887928a72ff3f46cf34 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 17 Dec 2020 22:03:55 +0300
Subject: [PATCH 1/3] Add Vocabulary Select implementation instead of buefy
 select

---
 src/App.vue                     |  3 +-
 src/Vocabulary/VSelect.vue      | 80 +++++++++++++++++++++++++++++++++
 src/components/DropdownStep.vue | 36 +++++++--------
 3 files changed, 97 insertions(+), 22 deletions(-)
 create mode 100644 src/Vocabulary/VSelect.vue

diff --git a/src/App.vue b/src/App.vue
index 898e500c8..fa57a3652 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/Vocabulary/VSelect.vue b/src/Vocabulary/VSelect.vue
new file mode 100644
index 000000000..b93b4b5f1
--- /dev/null
+++ b/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>
diff --git a/src/components/DropdownStep.vue b/src/components/DropdownStep.vue
index 239919a85..bf8dd1e0d 100644
--- a/src/components/DropdownStep.vue
+++ b/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() {

From 11b58a4c59109da141fd149a010bed835c40cbb0 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 17 Dec 2020 22:09:07 +0300
Subject: [PATCH 2/3] Revert "Add Vocabulary Select implementation instead of
 buefy select"

This reverts commit 6f09c179
---
 src/App.vue                     |  3 +-
 src/Vocabulary/VSelect.vue      | 80 ---------------------------------
 src/components/DropdownStep.vue | 36 ++++++++-------
 3 files changed, 22 insertions(+), 97 deletions(-)
 delete mode 100644 src/Vocabulary/VSelect.vue

diff --git a/src/App.vue b/src/App.vue
index fa57a3652..898e500c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -140,10 +140,11 @@ 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;
diff --git a/src/Vocabulary/VSelect.vue b/src/Vocabulary/VSelect.vue
deleted file mode 100644
index b93b4b5f1..000000000
--- a/src/Vocabulary/VSelect.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<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>
diff --git a/src/components/DropdownStep.vue b/src/components/DropdownStep.vue
index bf8dd1e0d..239919a85 100644
--- a/src/components/DropdownStep.vue
+++ b/src/components/DropdownStep.vue
@@ -1,29 +1,33 @@
 <template>
     <div class="step-actions">
-        <v-select - class="license-dropdown" - :placeholder="$t('stepper.DD.placeholder')" - :value="shortName" - @input="setCurrentLicense" ->
-            <option - v-for="license in licenseList" - :key="license" - :value="license" +><b-field class="license-dropdown">
+            <b-select + :placeholder="this.$t('stepper.DD.placeholder')" + :value="shortName" + @input="setCurrentLicense">
-                {{ license }}
-            </option>
-        </v-select>
+                <option + v-for="license in licenseList" + :key="license" + :value="license" +>
+                    {{ license }}
+                </option>
+            </b-select>
+        </b-field>
     </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() {

From 7142cf31f1076843744c0b259a997e8a3293efa1 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 17 Dec 2020 22:03:55 +0300
Subject: [PATCH 3/3] Add Vocabulary Select implementation instead of buefy
 select

(cherry picked from commit 6f09c179a352af6b2ea71887928a72ff3f46cf34)
---
 src/App.vue                     |  3 +-
 src/Vocabulary/VSelect.vue      | 80 +++++++++++++++++++++++++++++++++
 src/components/DropdownStep.vue | 36 +++++++--------
 3 files changed, 97 insertions(+), 22 deletions(-)
 create mode 100644 src/Vocabulary/VSelect.vue

diff --git a/src/App.vue b/src/App.vue
index 898e500c8..fa57a3652 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/Vocabulary/VSelect.vue b/src/Vocabulary/VSelect.vue
new file mode 100644
index 000000000..b93b4b5f1
--- /dev/null
+++ b/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>
diff --git a/src/components/DropdownStep.vue b/src/components/DropdownStep.vue
index 239919a85..bf8dd1e0d 100644
--- a/src/components/DropdownStep.vue
+++ b/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>
</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() {
