Color picker layout changes

lib/components/inputs/ColorPicker.vue

@@ -1,13 +1,18 @@
 <template>
-  <BaseModal :value="show" v-bind="$attrs" :persistent="false" max-width="300" @click:outside="close">
-    <div class="d-flex justify-center">
-      <v-color-picker v-model="inputValue" v-bind="$attrs" show-swatches v-on="$listeners" />
-    </div>
+  <BaseModal :value="show" max-width="300">
+    <v-card>
+      <v-color-picker v-model="inputValue" />
+      <v-card-actions class="mt-3">
+        <v-btn color="primary" @click="acceptColor">{{ okLabel }}</v-btn>
+        <v-btn @click="cancel">{{ cancelLabel }}</v-btn>
+      </v-card-actions>
+    </v-card>
     <template #activator="props">
       <slot name="activator" v-bind="props">
-        <v-btn text v-bind="props" app @click="open">
+        <v-btn depressed v-bind="{ ...props, ...$attrs }" app @click="open">
           {{ label }}
-          <v-icon right :color="value"> mdi-square-rounded </v-icon>
+          <v-icon v-if="value" right :color="value" style="margin-bottom:1px;"> mdi-checkbox-blank </v-icon>
+          <v-icon v-else right color="black" style="margin-bottom:1px;"> mdi-close-box-outline </v-icon>
         </v-btn>
       </slot>
     </template>
@@ -31,37 +36,43 @@ export default {
       type: String,
       default: '',
     },
+    okLabel: {
+      type: String,
+      default: 'OK',
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Abbrechen',
+    },
     value: {
       type: String,
       default: () => null,
     },
   },
   data() {
     return {
-      inputValue: this.value || this.default,
+      inputValue: this.getInitialValue(),
       show: false,
     }
   },
-  watch: {
-    before: {
-      handler(value) {
-        if (!value) {
-          this.$emit('input', this.default)
-        }
-      },
-      immediate: true,
-    },
-    value(_) {
-      this.$emit('input', this.inputValue)
-    },
-  },
   methods: {
     open() {
       this.show = true
     },
     close() {
       this.show = false
     },
+    cancel() {
+      this.inputValue = this.getInitialValue()
+      this.close()
+    },
+    acceptColor() {
+      this.$emit('input', this.inputValue)
+      this.close()
+    },
+    getInitialValue() {
+      return this.value || this.default
+    },
   },
 }
 </script>

nuxt.config.js

@@ -18,15 +18,18 @@ module.exports = {
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
   },
-  css: [],
+  css: [
+    '@mdi/font/css/materialdesignicons.min.css',
+    'roboto-fontface/css/roboto/roboto-fontface.css',
+  ],
   plugins: [],
   components: [
     {
       path: '~/lib/components',
       pathPrefix: false,
     },
   ],
-  vuetify: { theme: { options: { customProperties: true }, themes } },
+  vuetify: { defaultAssets: false, theme: { options: { customProperties: true }, themes } },
   buildModules: ['@nuxtjs/vuetify'],
   modules: ['@nuxt/http', '@nuxtjs/i18n'],
   i18n: {

package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@4tw/eslint-config": "^0.6.0",
     "@4tw/prettier-config": "^1.0.3",
+    "@mdi/font": "^7.4.47",
     "@nuxt/http": "^0.6.4",
     "@nuxtjs/i18n": "^7.0.1",
     "@nuxtjs/vuetify": "^1.12.1",
@@ -47,6 +48,7 @@
     "portfinder": "^1.0.28",
     "prettier": "^2.3.2",
     "release-it": "^14.11.3",
+    "roboto-fontface": "^0.10.0",
     "vue": "^2.7.16",
     "vue-jest": "^3.0.4",
     "vuetify": "^2.7.2",

yarn.lock

@@ -1889,6 +1889,11 @@
     "@jsonjoy.com/buffers" "^1.0.0"
     "@jsonjoy.com/codegen" "^1.0.0"
 
+"@mdi/font@^7.4.47":
+  version "7.4.47"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
+  integrity sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -11320,6 +11325,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+roboto-fontface@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/roboto-fontface/-/roboto-fontface-0.10.0.tgz#7eee40cfa18b1f7e4e605eaf1a2740afb6fd71b0"
+  integrity sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g==
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"