Add decimalColor

src/tools/decimalColor/App.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import Field from '@/components/Field.vue'
+import { ref, computed } from 'vue'
+import { colorStringToRgb } from '@/utils/color/index.ts'
+
+const color = ref('#f9fffe')
+const result = computed({
+  get: () => {
+    const rgb = colorStringToRgb(color.value)
+    return (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] // Red<<16 + Green<<8 + Blue
+  },
+  set: (result) => {
+    // reverse Red<<16 + Green<<8 + Blue
+    color.value =
+      '#' +
+      (result >> 16).toString(16).padStart(2, '0') +
+      ((result >> 8) & 0xff).toString(16).padStart(2, '0') +
+      (result & 0xff).toString(16).padStart(2, '0')
+  },
+})
+</script>
+<template>
+  <Field>
+    <template #heading>Calculate decimal representation of color</template>
+
+    <div
+      :style="{
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: '1rem',
+      }"
+    >
+      <div>
+        <div
+          :style="{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: '.5rem',
+          }"
+        >
+          <label for="decimalColor-color-picker">Color:</label>
+          <input type="color" v-model="color" id="decimalColor-color-picker" />
+        </div>
+        <div
+          :style="{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: '.5rem',
+          }"
+        >
+          <label for="decimalColor-color-picker-output">Decimal:</label>
+          <input type="text" v-model="result" id="decimalColor-color-picker-output" />
+        </div>
+      </div>
+    </div>
+  </Field>
+</template>

src/tools/decimalColor/main.ts

@@ -0,0 +1,11 @@
+/**
+ * @public
+ * @dependencies vue, @wikimedia/codex
+ */
+import * as vue from 'vue'
+import App from './App.vue'
+
+const targetEl = document.querySelector('.mcw-calc[data-type="decimalColor"]')!
+const createApp =
+  process.env.NODE_ENV === 'development' ? vue.createApp : vue.createMwApp || vue.createApp
+createApp(App).mount(targetEl)