Update tailwindcss, related dependencies, minor fixes

milespetrov · Sep 17, 2024 · ef560c2 · ef560c2
1 parent b1f79f6
commit ef560c2
Show file tree

Hide file tree

Showing 7 changed files with 9,635 additions and 5,762 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
         "@arcgis/core": "4.29.10",
         "@popperjs/core": "^2.11.6",
         "@ramp4-pcar4/vue3-treeselect": "github:ramp4-pcar4/vue3-treeselect",
-        "@tailwindcss/line-clamp": "^0.4.4",
         "@vueform/toggle": "^2.1.3",
         "ag-grid-community": "^27.3.0",
         "ag-grid-vue3": "^27.3.0",
@@ -87,7 +86,7 @@
         "@cypress/vite-dev-server": "^2.2.2",
         "@cypress/vue": "^3.1.1",
         "@rushstack/eslint-patch": "^1.2.0",
-        "@tailwindcss/forms": "^0.5.0",
+        "@tailwindcss/forms": "^0.5.9",
         "@tsconfig/node22": "^22.0.0",
         "@types/animejs": "~3.1.0",
         "@types/clone-deep": "~4.0.1",
@@ -106,25 +105,25 @@
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/tsconfig": "^0.5.1",
-        "autoprefixer": "^10.4.4",
+        "autoprefixer": "^10.4.20",
         "cypress": "^9.5.3",
         "cypress-plugin-tab": "~1.0.5",
         "d3-dsv": "^3.0.1",
         "eslint": "^8.56.0",
         "eslint-plugin-cypress": "^3.3.0",
         "eslint-plugin-vue": "^9.27.0",
         "npm-run-all2": "^6.1.2",
-        "postcss": "^8.4.12",
-        "postcss-import": "^14.1.0",
+        "postcss": "^8.4.47",
+        "postcss-import": "^16.1.0",
         "prettier": "^3.3.2",
         "sass": "^1.50.0",
         "start-server-and-test": "^1.14.0",
-        "tailwindcss": "^3.0.23",
+        "tailwindcss": "^3.4.11",
         "typedoc": "^0.26.3",
         "typescript": "^5.5.3",
         "vite": "^4.1.4",
         "vite-plugin-mkcert": "^1.17.5",
         "vitepress": "^1.0.0-beta.1",
-        "vue-tsc": "^2.0.26"
+        "vue-tsc": "^2.1.6"
     }
 }
diff --git a/src/app.vue b/src/app.vue
@@ -44,12 +44,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-$font-list: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
-    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+$font-list:
+    'Montserrat',
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji;
 @use 'directives/focus-list/focus-list';
 
 .ramp-styles {
-    @include focus-list.default-focused-styling;
     height: 100%;
     font-family: $font-list;
     h1,
@@ -67,10 +74,12 @@ $font-list: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica
         font-family: $font-list;
         line-height: 1.5;
     }
+    @include focus-list.default-focused-styling;
 }
 .symbologyIcon {
     @apply bg-white inline-flex justify-center items-center overflow-hidden;
-    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+    box-shadow:
+        0px 1px 3px 0px rgba(0, 0, 0, 0.2),
         0px 1px 1px 0px rgba(0, 0, 0, 0.14),
         0px 2px 1px -1px rgba(0, 0, 0, 0.12);
 }

diff --git a/src/fixtures/export/screen.vue b/src/fixtures/export/screen.vue
@@ -1,53 +1,55 @@
 <template>
-    <panel-screen :panel="panel" :footer="true">
-        <template #header> {{ t('export.title') }} </template>
-
-        <template #content>
-            <div class="overflow-hidden border border-gray-200">
-                <canvas class="export-canvas !w-[100%]"></canvas>
-            </div>
-        </template>
-
-        <template #footer>
-            <div class="flex">
-                <button
-                    type="button"
-                    @click="fixture?.export()"
-                    class="bg-green-500 hover:bg-green-700 text-white font-bold py-8 px-8 sm:px-16 mr-8 sm:mr-16"
-                    :aria-label="t('export.download')"
-                >
-                    {{ t('export.download') }}
-                </button>
-
-                <button
-                    type="button"
-                    @click="make()"
-                    class="py-8 px-4 sm:px-16"
-                    :aria-label="t('export.refresh')"
-                >
-                    {{ t('export.refresh') }}
-                </button>
-
-                <export-settings
-                    v-if="!hasCustomRenderer"
-                    :componentSelectedState="selectedComponents"
-                    class="ml-auto flex px-4 sm:px-8"
-                ></export-settings>
-            </div>
-        </template>
-    </panel-screen>
+    <div ref="componentEl">
+        <panel-screen :panel="panel" :footer="true">
+            <template #header> {{ t('export.title') }} </template>
+
+            <template #content>
+                <div class="overflow-hidden border border-gray-200">
+                    <canvas class="export-canvas !w-[100%]"></canvas>
+                </div>
+            </template>
+
+            <template #footer>
+                <div class="flex">
+                    <button
+                        type="button"
+                        @click="fixture?.export()"
+                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-8 px-8 sm:px-16 mr-8 sm:mr-16"
+                        :aria-label="t('export.download')"
+                    >
+                        {{ t('export.download') }}
+                    </button>
+
+                    <button
+                        type="button"
+                        @click="make()"
+                        class="py-8 px-4 sm:px-16"
+                        :aria-label="t('export.refresh')"
+                    >
+                        {{ t('export.refresh') }}
+                    </button>
+
+                    <export-settings
+                        v-if="!hasCustomRenderer"
+                        :componentSelectedState="selectedComponents"
+                        class="ml-auto flex px-4 sm:px-8"
+                    ></export-settings>
+                </div>
+            </template>
+        </panel-screen>
+    </div>
 </template>
 
 <script setup lang="ts">
 import {
     computed,
-    getCurrentInstance,
     inject,
     onBeforeMount,
     onBeforeUnmount,
     onMounted,
     ref,
-    watch
+    watch,
+    useTemplateRef
 } from 'vue';
 import type { PropType } from 'vue';
 import type { InstanceAPI, PanelInstance } from '@/api';
@@ -74,7 +76,7 @@ const fixture = ref<ExportAPI>();
 const resizeObserver = ref<ResizeObserver | undefined>(undefined);
 const watchers = ref<Array<Function>>([]);
 
-const el = computed<Element>(() => getCurrentInstance()?.proxy?.$el);
+const el = useTemplateRef('componentEl');
 const componentSelectedState = computed(
     () => exportStore.componentSelectedState
 );
@@ -114,11 +116,11 @@ const make = debounce(300, () => {
         return;
     }
 
-    const canvasElement = el.value.querySelector(
+    const canvasElement = el.value!.querySelector(
         '.export-canvas'
     ) as HTMLCanvasElement;
 
-    fixture.value.make(canvasElement, el.value.clientWidth);
+    fixture.value.make(canvasElement, el.value!.clientWidth);
 });
 
 onBeforeMount(() => {
@@ -136,7 +138,8 @@ onMounted(() => {
     resizeObserver.value = new ResizeObserver(() => {
         make();
     });
-    resizeObserver.value.observe(el.value);
+    // observe the root element for resize events, not the component itself
+    resizeObserver.value.observe(iApi?.$vApp.$root?.$el);
 });
 
 onBeforeUnmount(() => {

diff --git a/src/fixtures/layer-reorder/components/layer-component.vue b/src/fixtures/layer-reorder/components/layer-component.vue
@@ -35,7 +35,7 @@
                     <div class="display-none"></div>
 
                     <div
-                        class="flex items-center p-5 ms-5 h-44 cursor-pointer hover:bg-gray-200"
+                        class="flex items-center p-5 h-44 cursor-pointer hover:bg-gray-200"
                     >
                         <!-- dropdown toggle  -->
                         <button

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -24,12 +24,19 @@
         [multiple],
         textarea,
         select {
-            @apply text-base pt-8 pr-12 pb-8 pl-12 font-normal;
+            font-size: 16px;
+            line-height: 24px;
+            padding-top: 8px;
+            padding-right: 12px;
+            padding-bottom: 8px;
+            padding-left: 12px;
+            font-weight: 400;
         }
 
         [type='checkbox'],
         [type='radio'] {
-            @apply h-16 w-16;
+            height: 16px;
+            width: 16px;
         }
     }
 
@@ -41,8 +48,16 @@
 }
 
 .ramp-styles {
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI,
-        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family:
+        'Montserrat',
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Helvetica,
+        Arial,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji;
     font-size: 16px;
     line-height: 1.5;
     word-wrap: break-word;
@@ -54,8 +69,16 @@
 
 /* Change ag-grid theme default font (Roboto) to match the rest of the page. */
 .ramp-styles .ag-theme-material * {
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI,
-        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family:
+        'Montserrat',
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Helvetica,
+        Arial,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji;
 }
 
 .grid-icons {
@@ -101,8 +124,16 @@
 }
 
 .tippy-tooltip.ramp-theme {
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI,
-        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family:
+        'Montserrat',
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Helvetica,
+        Arial,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji;
     font-size: 14px;
 }
 
@@ -141,8 +172,16 @@
 }
 
 .tippy-box[data-theme~='ramp4'] {
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI,
-        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family:
+        'Montserrat',
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Helvetica,
+        Arial,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji;
     color: white;
     background: #222;
     opacity: 0.9;

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -103,7 +103,6 @@ module.exports = {
         }),
         require('@tailwindcss/forms')({
             strategy: 'base' // only generate global styles
-        }),
-        require('@tailwindcss/line-clamp')
+        })
     ]
 };