HTML Editor go on

src/components/CSelectColor/CSelectColor.ts

@@ -0,0 +1,40 @@
+import { defineComponent, ref, toRef, watch } from 'vue'
+import { tools } from '@src/store/Modules/tools'
+
+import {  useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+
+export default defineComponent({
+  name: 'CSelectColor',
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n();
+
+    const color = toRef(props, 'modelValue')
+
+    function updateValue(str: string) {
+      emit('update:modelValue', str)
+    }
+
+    return {
+      tools,
+      toolsext,
+      updateValue,
+      color,
+    }
+  },
+})

src/components/CSelectColor/CSelectColor.vue

@@ -0,0 +1,40 @@
+<template>
+  <q-select
+    rounded
+    outlined
+    v-model="color"
+    @update:model-value="updateValue"
+    :options="tools.SelectListColors"
+    dense
+    :label="title"
+    emit-value
+    map-options
+  >
+    <template v-slot:selected>
+      <q-chip
+        dense
+        square
+        color="white"
+        class="q-my-none q-ml-xs q-mr-none"
+      >
+        <span :style="`color: `+ color">{{ color }}</span>
+      </q-chip>
+    </template>
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section>
+          <q-item-label :style="`color: ` + scope.opt.value">{{
+            scope.opt.label
+          }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script lang="ts" src="./CSelectColor.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CSelectColor.scss';
+</style>

src/components/CSelectColor/index.ts

@@ -0,0 +1 @@
+export {default as CSelectColor} from './CSelectColor.vue'