feat: added tailwind and eslint

crawlab-team · Jun 20, 2024 · 5ff78f5 · 5ff78f5
1 parent 8faf076
commit 5ff78f5
Show file tree

Hide file tree

Showing 9 changed files with 7,319 additions and 10,708 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,12 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginVue from 'eslint-plugin-vue';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+];
diff --git a/package.json b/package.json
@@ -68,7 +68,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@popperjs/core": "^2.6.0",
-    "@types/codemirror": "^0.0.103",
     "@types/echarts": "^4.9.8",
     "@types/getos": "^3.0.1",
     "@types/humanize-duration": "^3.25.0",
@@ -101,45 +100,51 @@
     "showdown": "^1.9.1",
     "simplemde": "^1.11.2",
     "url-join": "^4.0.1",
-    "vue": "^3.2.45",
+    "vue": "^3.3",
     "vue-clipboard3": "^2.0.0",
     "vue-debounce": "^4.0.0",
     "vue-i18n": "9.1.9",
     "vue-router": "4.0.11",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@types/jest": "^28.1.3",
-    "@types/node": "^18.11.9",
-    "@types/node-os-utils": "^1.3.0",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-router": "^4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/cli-plugin-vuex": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
-    "@vue/compiler-sfc": "^3.2.45",
+    "@eslint/js": "^9.5.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.6",
+    "@types/node-os-utils": "^1.3.4",
+    "@vitejs/plugin-vue": "5.0.5",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.29",
+    "autoprefixer": "^10.4.19",
     "base64-img": "^1.0.4",
-    "chalk": "^4.1.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.7.1",
-    "esno": "^0.9.1",
-    "fast-glob": "^3.2.7",
-    "fs-extra": "^10.0.1",
-    "jest": "^28.1.1",
+    "chalk": "^5.3.0",
+    "eslint": "^9.5.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "esno": "^4.7.0",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.2.0",
+    "globals": "^15.6.0",
+    "jest": "^29.7.0",
     "klaw-sync": "^6.0.0",
     "node-sass": "^8.0.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.3.2",
     "rd": "^2.0.1",
-    "rollup-plugin-external-globals": "^0.8.0",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.56.1",
-    "serve": "^14.1.2",
-    "ts-morph": "^12.0.0",
-    "typescript": "^4.6.4",
-    "vite": "^4.0.0",
-    "vite-aliases": "^0.9.7",
-    "vite-plugin-dynamic-import": "^1.2.4",
-    "vue-tsc": "^1.0.9"
+    "rollup-plugin-external-globals": "^0.10.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.77.6",
+    "serve": "^14.2.3",
+    "tailwindcss": "^3.4.4",
+    "ts-morph": "^22.0.0",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.13.1",
+    "vite": "^5",
+    "vite-aliases": "^0.11.7",
+    "vite-plugin-dynamic-import": "^1.5.0",
+    "vue-tsc": "^2.0.21"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/components/button/IconButton.vue b/src/components/button/IconButton.vue
@@ -10,8 +10,7 @@
         :size="size"
         :title="tooltip"
         :type="type"
-        class="icon-button button"
-        style="padding: 7px"
+        class="icon-button button p-1"
         @click="() => $emit('click')"
       />
     </span>

diff --git a/src/components/nav/NavActions.vue b/src/components/nav/NavActions.vue
@@ -1,78 +1,63 @@
-<template>
-  <div ref="navActions" :class="classes" :style="style" class="nav-actions">
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+const props = defineProps<{
+  collapsed?: boolean;
+  minHeight?: string;
+}>();
 
-export default defineComponent({
-  name: 'NavActions',
-  props: {
-    collapsed: Boolean,
-    minHeight: String,
-  },
-  setup(props) {
-    const originalHeight = ref<string | null>(null);
-    const height = ref<string | null>(null);
+const originalHeight = ref<string | null>(null);
+const height = ref<string>();
 
-    const navActions = ref<HTMLDivElement | null>(null);
+const navActions = ref<HTMLDivElement | null>(null);
 
-    const unmounted = ref<boolean>(true);
+const unmounted = ref<boolean>(true);
 
-    const collapsed = computed<boolean>(() => {
-      const { collapsed } = props as NavActionsProps;
-      return collapsed || false;
-    });
-
-    const style = computed(() => {
-      return {
-        // height: height.value,
-        minHeight: height.value,
-      };
-    });
-
-    const classes = computed<string[]>(() => {
-      const cls = [];
-      if (collapsed.value) cls.push('collapsed');
-      if (unmounted.value) cls.push('unmounted');
-      return cls;
-    });
+const collapsed = computed<boolean>(() => {
+  const { collapsed } = props as NavActionsProps;
+  return collapsed || false;
+});
 
-    const updateHeight = () => {
-      if (!collapsed.value) {
-        if (originalHeight.value === null) {
-          if (!navActions.value) return;
-          originalHeight.value = `calc(${window.getComputedStyle(navActions.value).height} - 1px)`;
-        }
-        height.value = originalHeight.value;
-      } else {
-        height.value = '0';
-      }
-    };
+const style = computed(() => {
+  return {
+    // height: height.value,
+    minHeight: height.value,
+  };
+});
 
-    const getHeight = () => {
-      return height.value;
-    };
+const classes = computed<string[]>(() => {
+  const cls = [];
+  if (collapsed.value) cls.push('collapsed');
+  if (unmounted.value) cls.push('unmounted');
+  return cls;
+});
 
-    watch(collapsed, () => updateHeight());
+const updateHeight = () => {
+  if (!collapsed.value) {
+    if (originalHeight.value === null) {
+      if (!navActions.value) return;
+      originalHeight.value = `calc(${window.getComputedStyle(navActions.value).height} - 1px)`;
+    }
+    height.value = originalHeight.value;
+  } else {
+    height.value = '0';
+  }
+};
 
-    onMounted(() => {
-      updateHeight();
-      unmounted.value = false;
-    });
+watch(collapsed, () => updateHeight());
 
-    return {
-      navActions,
-      style,
-      classes,
-      getHeight,
-    };
-  },
+onMounted(() => {
+  updateHeight();
+  unmounted.value = false;
 });
 </script>
 
+<template>
+  <div ref="navActions" :class="classes" :style="style" class="nav-actions">
+    <slot></slot>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .nav-actions {
   margin: 0;

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './simplemde.scss';
+@import './tailwind.scss';
 
 body {
   height: 100%;

diff --git a/src/styles/tailwind.scss b/src/styles/tailwind.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};