Update - Clean up and upgrade (jordihales#53)

* Rework based on Next version * Further clean up * Fix lint issue
anurag-roy · Oct 14, 2022 · 7f3c0dd · 7f3c0dd
1 parent 959a61b
commit 7f3c0dd
Show file tree

Hide file tree

Showing 38 changed files with 1,309 additions and 2,216 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,3 +1,6 @@
 {
-  "extends": ["@nuxtjs"]
+  "extends": ["@nuxtjs"],
+  "rules": {
+    "comma-dangle": 0
+  }
 }
diff --git a/assets/css/range.css b/assets/css/range.css
@@ -0,0 +1,102 @@
+input[type='range'] {
+  width: 100%;
+  margin: 8.5px 0;
+  background-color: transparent;
+  -webkit-appearance: none;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  background: #1c2433;
+  border: 0px solid #111827;
+  border: 0;
+  border-radius: 25px;
+  width: 100%;
+  height: 7px;
+  cursor: pointer;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  margin-top: -8.5px;
+  width: 21px;
+  height: 22px;
+  background: #ee456f;
+  border: 1px solid #111827;
+  border-radius: 50px;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: #1c2433;
+}
+
+input[type='range']::-moz-range-track {
+  background: #1c2433;
+  border: 0px solid rgba(1, 1, 1, 0);
+  border: 0;
+  border-radius: 25px;
+  width: 100%;
+  height: 7px;
+  cursor: pointer;
+}
+
+input[type='range']::-moz-range-thumb {
+  width: 21px;
+  height: 22px;
+  background: #ee456f;
+  border: 1px solid #111827;
+  border-radius: 50px;
+  cursor: pointer;
+}
+
+input[type='range']::-ms-track {
+  background: transparent;
+  border-color: transparent;
+  border-width: 8.5px 0;
+  color: transparent;
+  width: 100%;
+  height: 7px;
+  cursor: pointer;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: #1c2433;
+  border: 0px solid rgba(1, 1, 1, 0);
+  border: 0;
+  border-radius: 50px;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: #1c2433;
+  border: 0px solid rgba(1, 1, 1, 0);
+  border: 0;
+  border-radius: 50px;
+}
+
+input[type='range']::-ms-thumb {
+  width: 21px;
+  height: 22px;
+  background: #ee456f;
+  border: 1px solid #111827;
+  border-radius: 50px;
+  cursor: pointer;
+  margin-top: 0px;
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: #1c2433;
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: #1c2433;
+}
+
+@supports (-ms-ime-align: auto) {
+  input[type='range'] {
+    margin: 0;
+  }
+}
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -1,108 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-input[type='range'] {
-  width: 100%;
-  margin: 8.5px 0;
-  background-color: transparent;
-  -webkit-appearance: none;
-}
-
-input[type='range']:focus {
-  outline: none;
-}
-
-input[type='range']::-webkit-slider-runnable-track {
-  background: #1c2433;
-  border: 0px solid #111827;
-  border: 0;
-  border-radius: 25px;
-  width: 100%;
-  height: 7px;
-  cursor: pointer;
-}
-
-input[type='range']::-webkit-slider-thumb {
-  margin-top: -8.5px;
-  width: 21px;
-  height: 22px;
-  background: #ee456f;
-  border: 1px solid #111827;
-  border-radius: 50px;
-  cursor: pointer;
-  -webkit-appearance: none;
-}
-
-input[type='range']:focus::-webkit-slider-runnable-track {
-  background: #1c2433;
-}
-
-input[type='range']::-moz-range-track {
-  background: #1c2433;
-  border: 0px solid rgba(1, 1, 1, 0);
-  border: 0;
-  border-radius: 25px;
-  width: 100%;
-  height: 7px;
-  cursor: pointer;
-}
-
-input[type='range']::-moz-range-thumb {
-  width: 21px;
-  height: 22px;
-  background: #ee456f;
-  border: 1px solid #111827;
-  border-radius: 50px;
-  cursor: pointer;
-}
-
-input[type='range']::-ms-track {
-  background: transparent;
-  border-color: transparent;
-  border-width: 8.5px 0;
-  color: transparent;
-  width: 100%;
-  height: 7px;
-  cursor: pointer;
-}
-
-input[type='range']::-ms-fill-lower {
-  background: #1c2433;
-  border: 0px solid rgba(1, 1, 1, 0);
-  border: 0;
-  border-radius: 50px;
-}
-
-input[type='range']::-ms-fill-upper {
-  background: #1c2433;
-  border: 0px solid rgba(1, 1, 1, 0);
-  border: 0;
-  border-radius: 50px;
-}
-
-input[type='range']::-ms-thumb {
-  width: 21px;
-  height: 22px;
-  background: #ee456f;
-  border: 1px solid #111827;
-  border-radius: 50px;
-  cursor: pointer;
-  margin-top: 0px;
-}
-
-input[type='range']:focus::-ms-fill-lower {
-  background: #1c2433;
-}
-
-input[type='range']:focus::-ms-fill-upper {
-  background: #1c2433;
-}
-
-@supports (-ms-ime-align: auto) {
-  input[type='range'] {
-    margin: 0;
-  }
-}
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import './range.css';
+@import 'tailwindcss/utilities';
diff --git a/assets/data/directionOptions.js b/assets/data/directionOptions.js
@@ -1,65 +1,112 @@
-export const directionOptions = [
+export const primaryDirections = [
   {
-    key: 'top',
-    chevron: '',
-    gradient: 'bg-gradient-to-t',
-    radial: 'bg-radial-at-t',
-    conic: 'bg-conic-to-t',
+    name: 'To Top',
+    css: 'bg-gradient-to-t'
   },
   {
-    key: 'bottom',
-    chevron: 'rotate-180',
-    gradient: 'bg-gradient-to-b',
-    radial: 'bg-radial-at-b',
-    conic: 'bg-conic-to-b',
+    name: 'To Top Right',
+    css: 'bg-gradient-to-tr'
   },
   {
-    key: 'left',
-    chevron: '-rotate-90',
-    gradient: 'bg-gradient-to-l',
-    radial: 'bg-radial-at-l',
-    conic: 'bg-conic-to-l',
+    name: 'To Right',
+    css: 'bg-gradient-to-r'
   },
   {
-    key: 'right',
-    chevron: 'rotate-90',
-    gradient: 'bg-gradient-to-r',
-    radial: 'bg-radial-at-r',
-    conic: 'bg-conic-to-r',
+    name: 'To Bottom Top',
+    css: 'bg-gradient-to-br'
   },
   {
-    key: 'top-left',
-    chevron: '-rotate-45',
-    gradient: 'bg-gradient-to-tl',
-    radial: 'bg-radial-at-tl',
-    conic: 'bg-conic-to-tl',
+    name: 'To Bottom',
+    css: 'bg-gradient-to-b'
   },
   {
-    key: 'top-right',
-    chevron: 'rotate-45',
-    gradient: 'bg-gradient-to-tr',
-    radial: 'bg-radial-at-tr',
-    conic: 'bg-conic-to-tr',
+    name: 'To Bottom Left',
+    css: 'bg-gradient-to-bl'
   },
   {
-    key: 'bottom-left',
-    chevron: '-rotate-135',
-    gradient: 'bg-gradient-to-bl',
-    radial: 'bg-radial-at-bl',
-    conic: 'bg-conic-to-bl',
+    name: 'To Left',
+    css: 'bg-gradient-to-l'
   },
   {
-    key: 'bottom-right',
-    chevron: 'rotate-135',
-    gradient: 'bg-gradient-to-br',
-    radial: 'bg-radial-at-br',
-    conic: 'bg-conic-to-br',
+    name: 'To Top Left',
+    css: 'bg-gradient-to-tl'
+  }
+]
+
+export const conicDirections = [
+  {
+    name: 'Conic Center',
+    css: 'bg-[conic-gradient(var(--tw-gradient-stops))]'
   },
   {
-    key: 'center',
-    chevron: '',
-    gradient: '',
-    radial: 'bg-radial',
-    conic: 'bg-conic',
+    name: 'Conic Top',
+    css: 'bg-[conic-gradient(at_top,_var(--tw-gradient-stops))]'
   },
+  {
+    name: 'Conic Top Right',
+    css: 'bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Conic Right',
+    css: 'bg-[conic-gradient(at_right,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Conic Bottom Right',
+    css: 'bg-[conic-gradient(at_bottom_right,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Conic Bottom',
+    css: 'bg-[conic-gradient(at_bottom,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Conic Bottom Left',
+    css: 'bg-[conic-gradient(at_bottom_left,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Conic Left',
+    css: 'bg-[conic-gradient(at_left,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Conic Top Left',
+    css: 'bg-[conic-gradient(at_top_left,_var(--tw-gradient-stops))]'
+  }
+]
+
+export const radialDirections = [
+  {
+    name: 'Radial Center',
+    css: 'bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Top',
+    css: 'bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Top Right',
+    css: 'bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Right',
+    css: 'bg-[radial-gradient(ellipse_at_right,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Bottom Right',
+    css: 'bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Bottom',
+    css: 'bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Bottom Left',
+    css: 'bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Left',
+    css: 'bg-[radial-gradient(ellipse_at_left,_var(--tw-gradient-stops))]'
+  },
+  {
+    name: 'Radial Top Left',
+    css: 'bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))]'
+  }
 ]