refactor: Update time input controls (#305)

* refactor: Remove Tailwind Forms * refactor(inputTime): Make time input a two-part field
Hanziness · Dec 21, 2022 · 8b7d811 · 8b7d811
1 parent f98a1fa
commit 8b7d811
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -85,7 +85,6 @@ This is an open-source project that welcomes contributions. Please check the [**
   * [`nuxt/google-fonts`](https://github.com/nuxt-community/google-fonts-module) for Google Fonts support
   * [`pinia`](https://pinia.vuejs.org/) for state management
 * [**Tailwind CSS**](https://tailwindcss.com/)
-  * [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)
 * [Tabler Icons](https://tabler-icons.io/) through [`vue-tabler-icons`](https://github.com/alex-oleshkevich/vue-tabler-icons)
 * [Workbox](https://github.com/GoogleChrome/workbox) as a PWA service worker
 * [`conventional-changelog/standard-version`](https://github.com/conventional-changelog/standard-version) for automatic changelog generation from [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)

diff --git a/assets/scss/tailwind.scss b/assets/scss/tailwind.scss
@@ -1,34 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  [type='text'],
-  [type='email'],
-  [type='url'],
-  [type='password'],
-  [type='number'],
-  [type='date'],
-  [type='datetime-local'],
-  [type='month'],
-  [type='search'],
-  [type='tel'],
-  [type='time'],
-  [type='week'],
-  [type='checkbox'],
-  [multiple],
-  textarea,
-  select {
-    @apply rounded-md border-gray-300 focus:border-gray-300 bg-gray-50 dark:bg-gray-100 focus:bg-white focus:ring-primary focus:ring focus:ring-offset-2;
-    @apply dark:bg-opacity-10 dark:hover:bg-opacity-20 dark:focus:bg-opacity-30 dark:text-gray-100 dark:border-gray-700 dark:focus:ring-offset-slate-800;
-    @apply transition-colors;
-  }
-}
-
-@layer base {
-  [type="checkbox"] {
-    @apply dark:bg-opacity-40 dark:hover:bg-opacity-50 dark:focus:bg-opacity-50 dark:active:bg-opacity-60 text-primary dark:text-primary;
-    // @apply dark:bg-gray-100 dark:bg-opacity-20 dark:hover:bg-opacity-50 dark:active:bg-opacity-90;
-    @apply dark:checked:hover:bg-current dark:checked:bg-current dark:checked:border-current;
-  }
-}
diff --git a/components/base/inputTime.vue b/components/base/inputTime.vue
@@ -22,7 +22,10 @@ const timeToObject = (timeInMs: number) => {
 }
 
 const innerValue = reactive(timeToObject(props.value))
-const inputMinutes = ref(true)
+const errorState = reactive({
+  min: false,
+  sec: false
+})
 
 const innerValueMs = computed(() => innerValue.min * 60 * 1000 + innerValue.sec * 1000)
 
@@ -44,13 +47,19 @@ watch(() => props.value, (newValue) => {
   const newTime = timeToObject(newValue)
   innerValue.min = newTime.min
   innerValue.sec = newTime.sec
+
+  errorState.min = false
+  errorState.sec = false
 })
 
 const updateMin = (newValue: string) => {
   const newValueNum = Number.parseInt(newValue)
 
   if (!isNaN(newValueNum) && newValueNum >= 0) {
     innerValue.min = newValueNum
+    errorState.min = false
+  } else {
+    errorState.min = true
   }
 }
 
@@ -59,51 +68,33 @@ const updateSec = (newValue: string) => {
 
   if (!isNaN(newValueNum) && newValueNum >= 0 && newValueNum <= 59) {
     innerValue.sec = newValueNum
+    errorState.sec = false
+  } else {
+    errorState.sec = true
   }
 }
 </script>
 
 <template>
-  <div class="flex flex-row items-center gap-2">
+  <div class="flex flex-row items-center gap-2 relative rounded-lg overflow-hidden bg-surface-light dark:bg-surface-dark outline outline-1 outline-surface-outline dark:outline-surface-darkoutline focus-within:ring focus-within:ring-primary dark:focus-within:ring-primary-dark transition">
     <input
-      v-if="inputMinutes"
       :value="innerValue.min"
-      class="min-w-0"
       type="text"
       pattern="[0-9]*"
       inputmode="numeric"
+      class="bg-transparent w-full py-2 pl-2 focus:ring-0 focus:bg-primary-container focus:text-primary-oncontainer dark:focus:bg-primary-darkcontainer dark:focus:text-primary-darkoncontainer focus:outline-none"
+      :class="{ 'bg-error-light dark:bg-error-dark text-error-onlight dark:text-error-ondark': errorState.min }"
       @input="(e) => updateMin((e.target as HTMLInputElement).value)"
     >
+    <span>:</span>
     <input
-      v-else
       :value="innerValue.sec"
-      class="min-w-0"
       type="text"
       pattern="[0-9]*"
       inputmode="numeric"
+      class="bg-transparent w-full py-2 pl-2 focus:ring-0 focus:bg-primary-container focus:text-primary-oncontainer dark:focus:bg-primary-darkcontainer dark:focus:text-primary-darkoncontainer focus:outline-none"
+      :class="{ 'bg-error-light dark:bg-error-dark text-error-onlight dark:text-error-ondark': errorState.sec }"
       @input="(e) => updateSec((e.target as HTMLInputElement).value)"
     >
-    <div class="flex flex-row items-center gap-1 mr-2">
-      <div class="w-6 h-6 px-1 -mx-1 text-sm text-center rounded-full cursor-pointer" :class="{ 'font-bold bg-primary dark:bg-primary-dark bg-opacity-40': inputMinutes }" @click="inputMinutes = true">
-        m
-      </div>
-      <div class="w-6 h-6 px-1 -mx-1 text-sm text-center rounded-full cursor-pointer" :class="{ 'font-bold bg-primary dark:bg-primary-dark bg-opacity-40': !inputMinutes }" @click="inputMinutes = false">
-        s
-      </div>
-      <!-- <ButtonComponent default-style circle :importance="3" class="flex-shrink-0 text-sm" inner-class="!p-2">
-        m
-      </ButtonComponent>
-      <ButtonComponent default-style circle :importance="3" class="flex-shrink-0 text-sm" inner-class="!p-2">
-        s
-      </ButtonComponent> -->
-    </div>
-    <!-- <Toggle :value="inputMinutes" class="flex-shrink-0" @input="(newValue) => inputMinutes = newValue">
-      <template #when-on>
-        m
-      </template>
-      <template #when-off>
-        s
-      </template>
-    </Toggle> -->
   </div>
 </template>
diff --git a/package.json b/package.json
@@ -34,7 +34,6 @@
     "@nuxtjs/eslint-module": "^3.1.0",
     "@nuxtjs/google-fonts": "^3.0.0-1",
     "@pinia/nuxt": "^0.4.3",
-    "@tailwindcss/forms": "^0.5.3",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "autoprefixer": "^10.4.13",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -50,6 +50,16 @@ module.exports = {
           ondarkvariant: '#d7c1c0',
           darkoutline: '#a08c8b'
         },
+        error: {
+          light: '#ba1a1a',
+          onlight: '#ffffff',
+          lightcontainer: '#ffdad6',
+          onlightcontainer: '#410002',
+          dark: '#ffb4ab',
+          ondark: '#690005',
+          darkcontainer: '#93000a',
+          ondarkcontainer: '#ffdad6'
+        },
         work: '#FF6B6B',
         shortpause: '#F4A261',
         longpause: '#2EC4B6',
@@ -58,10 +68,6 @@ module.exports = {
       }
     }
   },
-  plugins: [
-    // require('@tailwindcss/typography')
-    require('@tailwindcss/forms')
-  ],
   future: {
     // TODO only in Tailwind 3.1
     // only apply hover classes when @media hover:hover and pointer:fine

diff --git a/yarn.lock b/yarn.lock
@@ -2318,17 +2318,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/forms@npm:^0.5.3":
-  version: 0.5.3
-  resolution: "@tailwindcss/forms@npm:0.5.3"
-  dependencies:
-    mini-svg-data-uri: ^1.2.3
-  peerDependencies:
-    tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1"
-  checksum: 9eddb4dbd06d01b1068138ff52a54ed0e35a28e7bfd3c72e226fc28658ecd92a9c078c4abe9c83db090984672040644d7ae2e035933fb619dd703df1d87aa275
-  languageName: node
-  linkType: hard
-
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -2975,7 +2964,6 @@ __metadata:
     "@nuxtjs/eslint-module": ^3.1.0
     "@nuxtjs/google-fonts": ^3.0.0-1
     "@pinia/nuxt": ^0.4.3
-    "@tailwindcss/forms": ^0.5.3
     "@typescript-eslint/eslint-plugin": ^5.42.1
     "@typescript-eslint/parser": ^5.42.1
     autoprefixer: ^10.4.13
@@ -8148,15 +8136,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mini-svg-data-uri@npm:^1.2.3":
-  version: 1.4.4
-  resolution: "mini-svg-data-uri@npm:1.4.4"
-  bin:
-    mini-svg-data-uri: cli.js
-  checksum: 997f1fbd8d59a70f03761e18626d335197a3479cb9d1ff75678e4b64b864d32a0b8fc18115eabde035e5299b8b4a354a78e57dd6ac10f9d604162a6170898d09
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"