From 6ff0a7f0215de1acd0490020b53485c45550df79 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2024 15:58:26 +0300
Subject: refactor sizesetting into unitsetting allowing more unit types with
 i18n support

---
 .../settings_modal/helpers/size_setting.js         | 40 --------------
 .../settings_modal/helpers/size_setting.vue        | 62 ----------------------
 .../settings_modal/helpers/unit_setting.js         | 48 +++++++++++++++++
 .../settings_modal/helpers/unit_setting.vue        | 61 +++++++++++++++++++++
 4 files changed, 109 insertions(+), 102 deletions(-)
 delete mode 100644 src/components/settings_modal/helpers/size_setting.js
 delete mode 100644 src/components/settings_modal/helpers/size_setting.vue
 create mode 100644 src/components/settings_modal/helpers/unit_setting.js
 create mode 100644 src/components/settings_modal/helpers/unit_setting.vue

(limited to 'src/components/settings_modal/helpers')

diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js
deleted file mode 100644
index 12cef705..00000000
--- a/src/components/settings_modal/helpers/size_setting.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Select from 'src/components/select/select.vue'
-import Setting from './setting.js'
-
-export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
-export const defaultHorizontalUnits = ['px', 'rem', 'vw']
-export const defaultVerticalUnits = ['px', 'rem', 'vh']
-
-export default {
-  ...Setting,
-  components: {
-    ...Setting.components,
-    Select
-  },
-  props: {
-    ...Setting.props,
-    min: Number,
-    units: {
-      type: Array,
-      default: () => allCssUnits
-    }
-  },
-  computed: {
-    ...Setting.computed,
-    stateUnit () {
-      return this.state.replace(/\d+/, '')
-    },
-    stateValue () {
-      return this.state.replace(/\D+/, '')
-    }
-  },
-  methods: {
-    ...Setting.methods,
-    updateValue (e) {
-      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
-    },
-    updateUnit (e) {
-      this.configSink(this.path, this.stateValue + e.target.value)
-    }
-  }
-}
diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue
deleted file mode 100644
index 6c3fbaeb..00000000
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <span
-    v-if="matchesExpertLevel"
-    class="SizeSetting"
-  >
-    <label
-      :for="path"
-      class="size-label"
-    >
-      <slot />
-    </label>
-    <input
-      :id="path"
-      class="number-input"
-      type="number"
-      step="1"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="stateValue"
-      @change="updateValue"
-    >
-    <Select
-      :id="path"
-      :model-value="stateUnit"
-      :disabled="disabled"
-      class="css-unit-input"
-      @change="updateUnit"
-    >
-      <option
-        v-for="option in units"
-        :key="option"
-        :value="option"
-      >
-        {{ option }}
-      </option>
-    </Select>
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-  </span>
-</template>
-
-<script src="./size_setting.js"></script>
-
-<style lang="scss">
-.SizeSetting {
-  .number-input {
-    max-width: 6.5em;
-  }
-
-  .css-unit-input,
-  .css-unit-input select {
-    margin-left: 0.5em;
-    width: 4em;
-    max-width: 4em;
-    min-width: 4em;
-  }
-}
-
-</style>
diff --git a/src/components/settings_modal/helpers/unit_setting.js b/src/components/settings_modal/helpers/unit_setting.js
new file mode 100644
index 00000000..c9c23cb0
--- /dev/null
+++ b/src/components/settings_modal/helpers/unit_setting.js
@@ -0,0 +1,48 @@
+import Select from 'src/components/select/select.vue'
+import Setting from './setting.js'
+
+export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
+export const defaultHorizontalUnits = ['px', 'rem', 'vw']
+export const defaultVerticalUnits = ['px', 'rem', 'vh']
+
+export default {
+  ...Setting,
+  components: {
+    ...Setting.components,
+    Select
+  },
+  props: {
+    ...Setting.props,
+    min: Number,
+    units: {
+      type: Array,
+      default: () => allCssUnits
+    },
+    unitSet: {
+      type: String,
+      default: 'none'
+    }
+  },
+  computed: {
+    ...Setting.computed,
+    stateUnit () {
+      return this.state.replace(/\d+/, '')
+    },
+    stateValue () {
+      return this.state.replace(/\D+/, '')
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    getUnitString (value) {
+      if (this.unitSet === 'none') return value
+      return this.$t(['settings', 'units', this.unitSet, value].join('.'))
+    },
+    updateValue (e) {
+      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
+    },
+    updateUnit (e) {
+      this.configSink(this.path, this.stateValue + e.target.value)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
new file mode 100644
index 00000000..d6aafe26
--- /dev/null
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -0,0 +1,61 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="UnitSetting"
+  >
+    <label
+      :for="path"
+      class="size-label"
+    >
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      step="1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="stateValue"
+      @change="updateValue"
+    >
+    <Select
+      :id="path"
+      :model-value="stateUnit"
+      :disabled="disabled"
+      class="unit-input unstyled"
+      @change="updateUnit"
+    >
+      <option
+        v-for="option in units"
+        :key="option"
+        :value="option"
+      >
+        {{ getUnitString(option) }}
+      </option>
+    </Select>
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </span>
+</template>
+
+<script src="./unit_setting.js"></script>
+
+<style lang="scss">
+.UnitSetting {
+  .number-input {
+    max-width: 6.5em;
+    text-align: right;
+  }
+
+  .unit-input,
+  .unit-input select {
+    min-width: 4em;
+    width: auto;
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2