feat(new tool): Parquet File Reader

Fix #1516

src/modules/command-palette/command-palette.vue

@@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
       <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
 
       <div v-for="(options, category) in filteredSearchResult" :key="category">
-        <div ml-3 mt-3 text-sm font-bold text-primary op-60>
+        <div ml-3 mt-3 text-sm text-primary font-bold op-60>
           {{ category }}
         </div>
         <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as parquetsReader } from './parquets-reader';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -160,6 +161,7 @@ export const toolsByCategory: ToolCategory[] = [
       emailNormalizer,
       regexTester,
       regexMemo,
+      parquetsReader,
     ],
   },
   {

src/tools/parquets-reader/index.ts

@@ -0,0 +1,12 @@
+import { Parking } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Parquet files Reader',
+  path: '/parquets-reader',
+  description: 'Read parquet file as JSON object arrays',
+  keywords: ['parquet', 'reader'],
+  component: () => import('./parquets-reader.vue'),
+  icon: Parking,
+  createdAt: new Date('2025-02-09'),
+});

src/tools/parquets-reader/parquets-reader.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// import { Buffer } from 'node:buffer';
+import { parquetReadObjects } from 'hyparquet';
+import { compressors } from 'hyparquet-compressors';
+import type { DataTableInst } from 'naive-ui';
+
+const fileInput = ref() as Ref<File | null>;
+
+const error = ref('');
+
+const results = computedAsync(async () => {
+  const file = fileInput.value;
+  error.value = '';
+  if (file == null) {
+    return null;
+  }
+  try {
+    return await parquetReadObjects({ file: await file.arrayBuffer(), compressors });
+  }
+  catch (e: any) {
+    error.value = e.toString();
+    return [];
+  }
+});
+const resultsJson = computed(() => JSON.stringify(results.value || [], (_, v) => typeof v === 'bigint' ? v.toString() : v, 2));
+
+const columns = computed(() => Object.keys((results.value || [])[0] || {})
+  .map(h => ({ key: h.replace(/\./g, '\\.'), title: h })));
+
+function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+
+const tableRef = ref<DataTableInst>();
+function downloadCsv() {
+  tableRef.value?.downloadCsv({ fileName: fileInput.value?.name || 'data' });
+}
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Input" mb-2>
+      <c-file-upload
+        title="Drag and drop Parquet file here, or click to select a file"
+        @file-upload="onUpload"
+      />
+    </c-card>
+
+    <c-alert v-if="error">
+      {{ error }}
+    </c-alert>
+
+    <n-tabs v-if="!error" type="line" animated>
+      <n-tab-pane name="jsonData" tab="JSON Content">
+        <textarea-copyable :value="resultsJson" language="json" :download-file-name="`${fileInput?.name}.json`" />
+      </n-tab-pane>
+      <n-tab-pane v-if="columns.length" name="tabData" tab="Table View">
+        <div mb-1 flex justify-center>
+          <n-button @click="downloadCsv">
+            Export as CSV
+          </n-button>
+        </div>
+        <n-data-table
+          ref="tableRef"
+          size="small"
+          :columns="columns"
+
+          :data="results" bordered striped
+          pagination
+        />
+      </n-tab-pane>
+    </n-tabs>
+  </div>
+</template>

src/ui/c-select/c-select.vue

@@ -151,7 +151,7 @@ function onSearchInput() {
       >
         <div flex-1 truncate>
           <slot name="displayed-value">
-            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
             <span v-else-if="selectedOption" lh-normal>
               {{ selectedOption.label }}
             </span>

src/ui/c-table/c-table.vue

@@ -39,7 +39,7 @@ const headers = computed(() => {
 <template>
   <div class="relative overflow-x-auto rounded">
     <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
-      <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
+      <thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
         <tr>
           <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
             {{ header.label }}