refactor: separate all words in theme keys with underscores

discue · Jan 4, 2023 · 96bd737 · 96bd737
1 parent 4ada311
commit 96bd737
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 37 deletions.
diff --git a/create_theme_keys.js b/create_theme_keys.js
@@ -22,9 +22,19 @@ const flat = flatten(themeData)
 const keys = Object.entries(flat) //
     .filter(([key]) => key.endsWith('._value')) //
     .map(([key]) => {
+        const externalKey = key.substring(0, key.indexOf('._value')).split('').reduce((context, next) => {
+            if (next === '.') {
+                context += '_'
+                return context
+            } else if (next.charCodeAt(0) < 97 && next.charCodeAt(0) >= 65) {
+                context += '_'
+            }
+            return context += next.toUpperCase()
+        }, '')
+
         return {
             internalKey: key.substring(0, key.indexOf('._value')),
-            externalKey: key.substring(0, key.indexOf('._value')).toUpperCase().replace(/\./g, '_')
+            externalKey
         }
     })
 

diff --git a/src/components/form-element-container-with-label.vue b/src/components/form-element-container-with-label.vue
@@ -48,7 +48,7 @@
 
 <script setup>
 import { computed, ref, watchEffect } from 'vue';
-import { FORMELEMENTHINTANDPATTERN_COLOR_DEFAULT, FORMELEMENTHINTANDPATTERN_SIZE_DEFAULT, FORMELEMENTHINTANDPATTERN_WEIGHT_DEFAULT, FORMELEMENTLABEL_BACKGROUND_DEFAULT, FORMELEMENTLABEL_COLOR_ATTENTION, FORMELEMENTLABEL_COLOR_DEFAULT, FORMELEMENTLABEL_SIZE_DEFAULT, FORMELEMENTLABEL_WEIGHT_DEFAULT, FORMELEMENT_BORDERCOLOR_ACTIVE, FORMELEMENT_BORDERCOLOR_ATTENTION, FORMELEMENT_BORDERCOLOR_DEFAULT, FORMELEMENT_BORDERRINGCOLOR_DEFAULT, FORMELEMENT_BORDERRINGSIZE_DEFAULT, FORMELEMENT_BORDERSIZE_DEFAULT, getThemeProperty } from '../theme.js';
+import { FORM_ELEMENT_BORDER_COLOR_ACTIVE, FORM_ELEMENT_BORDER_COLOR_ATTENTION, FORM_ELEMENT_BORDER_COLOR_DEFAULT, FORM_ELEMENT_BORDER_RING_COLOR_DEFAULT, FORM_ELEMENT_BORDER_RING_SIZE_DEFAULT, FORM_ELEMENT_BORDER_SIZE_DEFAULT, FORM_ELEMENT_HINT_COLOR_DEFAULT, FORM_ELEMENT_HINT_SIZE_DEFAULT, FORM_ELEMENT_HINT_WEIGHT_DEFAULT, FORM_ELEMENT_LABEL_BACKGROUND_DEFAULT, FORM_ELEMENT_LABEL_COLOR_ATTENTION, FORM_ELEMENT_LABEL_COLOR_DEFAULT, FORM_ELEMENT_LABEL_SIZE_DEFAULT, FORM_ELEMENT_LABEL_WEIGHT_DEFAULT, getThemeProperty } from '../theme.js';
 import FormError from './form-element-error-message.vue';
 
 const props = defineProps({
@@ -108,39 +108,39 @@ const showFormat = computed(() => {
     return props.format && props.showFormatHint && props.focussed
 })
 const parentClazz = computed(() => {
-    const clazz = [getThemeProperty(FORMELEMENT_BORDERSIZE_DEFAULT).value]
+    const clazz = [getThemeProperty(FORM_ELEMENT_BORDER_SIZE_DEFAULT).value]
     if (hasFocus.value || props.focussed) {
-        clazz.push(getThemeProperty(FORMELEMENT_BORDERCOLOR_ACTIVE).value)
-        clazz.push(getThemeProperty(FORMELEMENT_BORDERRINGSIZE_DEFAULT).value, getThemeProperty(FORMELEMENT_BORDERRINGCOLOR_DEFAULT).value)
+        clazz.push(getThemeProperty(FORM_ELEMENT_BORDER_COLOR_ACTIVE).value)
+        clazz.push(getThemeProperty(FORM_ELEMENT_BORDER_RING_SIZE_DEFAULT).value, getThemeProperty(FORM_ELEMENT_BORDER_RING_COLOR_DEFAULT).value)
     } else if (isInvalid.value) {
-        clazz.push(getThemeProperty(FORMELEMENT_BORDERCOLOR_ATTENTION).value)
+        clazz.push(getThemeProperty(FORM_ELEMENT_BORDER_COLOR_ATTENTION).value)
     } else {
-        clazz.push(getThemeProperty(FORMELEMENT_BORDERCOLOR_DEFAULT).value)
+        clazz.push(getThemeProperty(FORM_ELEMENT_BORDER_COLOR_DEFAULT).value)
     }
     return clazz.join(' ')
 })
 const labelClazz = computed(() => {
     const clazz = [
         'cursor-text -left-3 -top-3.5 py-1 px-2 absolute leading-7',
-        getThemeProperty(FORMELEMENTLABEL_SIZE_DEFAULT).value,
-        getThemeProperty(FORMELEMENTLABEL_BACKGROUND_DEFAULT).value,
-        getThemeProperty(FORMELEMENTLABEL_WEIGHT_DEFAULT).value
+        getThemeProperty(FORM_ELEMENT_LABEL_SIZE_DEFAULT).value,
+        getThemeProperty(FORM_ELEMENT_LABEL_BACKGROUND_DEFAULT).value,
+        getThemeProperty(FORM_ELEMENT_LABEL_WEIGHT_DEFAULT).value
     ]
 
     if (isInvalid.value) {
-        clazz.push(getThemeProperty(FORMELEMENTLABEL_COLOR_ATTENTION).value)
+        clazz.push(getThemeProperty(FORM_ELEMENT_LABEL_COLOR_ATTENTION).value)
     } else {
-        clazz.push(getThemeProperty(FORMELEMENTLABEL_COLOR_DEFAULT).value)
+        clazz.push(getThemeProperty(FORM_ELEMENT_LABEL_COLOR_DEFAULT).value)
     }
 
     return clazz.join(' ')
 })
 const hintClazz = computed(() => {
     const clazz = [
         'absolute cursor-text -top-2 p-1.5 right-0 leading-7 italic ml-auto transition-opacity duration-200 ease-in',
-        getThemeProperty(FORMELEMENTHINTANDPATTERN_COLOR_DEFAULT).value,
-        getThemeProperty(FORMELEMENTHINTANDPATTERN_SIZE_DEFAULT).value,
-        getThemeProperty(FORMELEMENTHINTANDPATTERN_WEIGHT_DEFAULT).value,
+        getThemeProperty(FORM_ELEMENT_HINT_COLOR_DEFAULT).value,
+        getThemeProperty(FORM_ELEMENT_HINT_SIZE_DEFAULT).value,
+        getThemeProperty(FORM_ELEMENT_HINT_WEIGHT_DEFAULT).value,
  
     ]
 

diff --git a/src/components/form-element-error-message.vue b/src/components/form-element-error-message.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { FORMELEMENTERROR_COLOR_DEFAULT, FORMELEMENTERROR_SIZE_DEFAULT, FORMELEMENTERROR_WEIGHT_DEFAULT, getThemeProperty } from '../theme.js';
+import { FORM_ELEMENT_ERROR_COLOR_DEFAULT, FORM_ELEMENT_ERROR_SIZE_DEFAULT, FORM_ELEMENT_ERROR_WEIGHT_DEFAULT, getThemeProperty } from '../theme.js';
 
 defineProps({
     id: {
@@ -22,9 +22,9 @@ defineProps({
 const clazz = computed(() => {
     const clazz = ['dsq-form-element-error-message']
 
-    clazz.push(getThemeProperty(FORMELEMENTERROR_COLOR_DEFAULT).value)
-    clazz.push(getThemeProperty(FORMELEMENTERROR_SIZE_DEFAULT).value)
-    clazz.push(getThemeProperty(FORMELEMENTERROR_WEIGHT_DEFAULT).value)
+    clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_COLOR_DEFAULT).value)
+    clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_SIZE_DEFAULT).value)
+    clazz.push(getThemeProperty(FORM_ELEMENT_ERROR_WEIGHT_DEFAULT).value)
 
     return clazz.join(' ')
 })

diff --git a/src/theme-keys.js b/src/theme-keys.js
@@ -1,21 +1,21 @@
 // This file is auto generated by create_theme_keys.js. Please run it manually after adding new theme properties.
-export const FORMELEMENT_BORDERSIZE_DEFAULT = 'formElement.borderSize.default'
-export const FORMELEMENT_BORDERCOLOR_DEFAULT = 'formElement.borderColor.default'
-export const FORMELEMENT_BORDERCOLOR_ACTIVE = 'formElement.borderColor.active'
-export const FORMELEMENT_BORDERCOLOR_ATTENTION = 'formElement.borderColor.attention'
-export const FORMELEMENT_BORDERRINGSIZE_DEFAULT = 'formElement.borderRingSize.default'
-export const FORMELEMENT_BORDERRINGCOLOR_DEFAULT = 'formElement.borderRingColor.default'
-export const FORMELEMENTLABEL_SIZE_DEFAULT = 'formElementLabel.size.default'
-export const FORMELEMENTLABEL_COLOR_DEFAULT = 'formElementLabel.color.default'
-export const FORMELEMENTLABEL_COLOR_ATTENTION = 'formElementLabel.color.attention'
-export const FORMELEMENTLABEL_BACKGROUND_DEFAULT = 'formElementLabel.background.default'
-export const FORMELEMENTLABEL_WEIGHT_DEFAULT = 'formElementLabel.weight.default'
-export const FORMELEMENTHINTANDPATTERN_SIZE_DEFAULT = 'formElementHintAndPattern.size.default'
-export const FORMELEMENTHINTANDPATTERN_COLOR_DEFAULT = 'formElementHintAndPattern.color.default'
-export const FORMELEMENTHINTANDPATTERN_WEIGHT_DEFAULT = 'formElementHintAndPattern.weight.default'
-export const FORMELEMENTERROR_SIZE_DEFAULT = 'formElementError.size.default'
-export const FORMELEMENTERROR_COLOR_DEFAULT = 'formElementError.color.default'
-export const FORMELEMENTERROR_WEIGHT_DEFAULT = 'formElementError.weight.default'
+export const FORM_ELEMENT_BORDER_SIZE_DEFAULT = 'formElement.borderSize.default'
+export const FORM_ELEMENT_BORDER_COLOR_DEFAULT = 'formElement.borderColor.default'
+export const FORM_ELEMENT_BORDER_COLOR_ACTIVE = 'formElement.borderColor.active'
+export const FORM_ELEMENT_BORDER_COLOR_ATTENTION = 'formElement.borderColor.attention'
+export const FORM_ELEMENT_BORDER_RING_SIZE_DEFAULT = 'formElement.borderRingSize.default'
+export const FORM_ELEMENT_BORDER_RING_COLOR_DEFAULT = 'formElement.borderRingColor.default'
+export const FORM_ELEMENT_LABEL_SIZE_DEFAULT = 'formElementLabel.size.default'
+export const FORM_ELEMENT_LABEL_COLOR_DEFAULT = 'formElementLabel.color.default'
+export const FORM_ELEMENT_LABEL_COLOR_ATTENTION = 'formElementLabel.color.attention'
+export const FORM_ELEMENT_LABEL_BACKGROUND_DEFAULT = 'formElementLabel.background.default'
+export const FORM_ELEMENT_LABEL_WEIGHT_DEFAULT = 'formElementLabel.weight.default'
+export const FORM_ELEMENT_HINT_SIZE_DEFAULT = 'formElementHint.size.default'
+export const FORM_ELEMENT_HINT_COLOR_DEFAULT = 'formElementHint.color.default'
+export const FORM_ELEMENT_HINT_WEIGHT_DEFAULT = 'formElementHint.weight.default'
+export const FORM_ELEMENT_ERROR_SIZE_DEFAULT = 'formElementError.size.default'
+export const FORM_ELEMENT_ERROR_COLOR_DEFAULT = 'formElementError.color.default'
+export const FORM_ELEMENT_ERROR_WEIGHT_DEFAULT = 'formElementError.weight.default'
 export const TEXT_SIZE_DEFAULT = 'text.size.default'
 export const TEXT_SIZE_SMALL = 'text.size.small'
 export const TEXT_SIZE_LARGE = 'text.size.large'

diff --git a/src/theme.js b/src/theme.js
@@ -33,7 +33,7 @@ const theme = {
             'default': ref('font-bold')
         }
     },
-    formElementHintAndPattern: {
+    formElementHint: {
         size: {
             'default': ref('text-xs')
         },