fix: trim and avoid shrinks the icon on long file names

package.json

@@ -95,29 +95,29 @@
     "@storybook/addon-links": "~6.4.22",
     "@storybook/builder-vite": "0.1.37",
     "@storybook/vue3": "~6.4.22",
-    "@swc/core": "^1.3.1",
+    "@swc/core": "^1.3.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lz-string": "^1.3.34",
-    "@types/node": "^18.7.18",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@types/node": "^18.7.23",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vitest/ui": "^0.23.4",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/eslint-config-typescript": "^11.0.1",
-    "autoprefixer": "^10.4.11",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",
     "bumpp": "^8.2.1",
     "codesandbox-import-util-types": "~2.2.3",
     "concurrently": "^7.4.0",
-    "core-js": "^3.25.2",
+    "core-js": "^3.25.3",
     "cssnano": "^5.1.13",
     "esbuild-plugin-babel": "^0.2.3",
-    "eslint": "^8.23.1",
+    "eslint": "^8.24.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
@@ -133,14 +133,14 @@
     "postcss-nested": "^5.0.6",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.5",
-    "stylelint": "^14.12.0",
+    "stylelint": "^14.12.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^28.0.0",
     "stylelint-prettier": "^2.0.0",
     "tsup": "^6.2.3",
     "typescript": "^4.8.3",
-    "vite": "^3.1.2",
+    "vite": "^3.1.3",
     "vite-plugin-dts": "^1.5.0",
     "vite-plugin-windicss": "^1.8.8",
     "vitest": "^0.23.4",

playground/package.json

@@ -15,9 +15,9 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.8",
-    "@unocss/reset": "^0.45.21",
+    "@unocss/reset": "^0.45.25",
     "cross-env": "^7.0.3",
-    "unocss": "^0.45.21",
+    "unocss": "^0.45.25",
     "vite-plugin-pages": "^0.26.0",
     "vue-loader": "^17.0.0"
   }

playground/stories/FileExplorer.stories.tsx

@@ -23,6 +23,7 @@ export const Component = () => (
         '/index.tsx': '',
         '/src/app.tsx': '',
         '/src/components/button.tsx': '',
+        '/src/components/really-loooooooong-naaameeee.tsx': '',
       }}
     >
       <SandpackLayout>

src/components/file-explorer/File.tsx

@@ -1,6 +1,6 @@
 import { buttonClassName } from '../../styles/shared';
 import { classNames } from '../../utils/classNames';
-import { computed, DefineComponent, defineComponent } from 'vue';
+import { computed, DefineComponent, defineComponent, StyleValue } from 'vue';
 import { css, THEME_PREFIX } from '../../styles';
 import { DirectoryIconOpen, DirectoryIconClosed, FileIcon } from '../../icons';
 import { useClasser } from 'code-hike-classer-vue3';
@@ -11,6 +11,12 @@ const explorerClassName = css({
   padding: 0,
   marginBottom: '$space$2',
 
+  span: {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  },
+
   svg: {
     marginRight: '$space$1',
   },
@@ -81,15 +87,15 @@ export const File = defineComponent({
         )}
         data-active={props.active}
         onClick={onClickButton}
-        style={{ paddingLeft: 9 * props.depth + 'px' }}
+        style={{ paddingLeft: 9 * props.depth + 'px' } as StyleValue}
         type="button"
       >
         {
           props.selectFile
             ? <FileIcon />
             : props.isDirOpen ? <DirectoryIconOpen /> : <DirectoryIconClosed />
         }
-        {fileName.value}
+        <span>{fileName.value}</span>
       </button>
     );
   },

src/styles/shared.ts

@@ -24,6 +24,7 @@ export const buttonClassName = css({
   '&[data-active="true"]': { color: '$colors$accent' },
 
   svg: {
+    minWidth: '$space$4',
     width: '$space$4',
     height: '$space$4',
   },