nuxt-google-sheets-import 0.1.10 → 0.1.11

package/README.md

@@ -46,6 +46,12 @@ NUXT_GOOGLE_API_KEY=your_google_sheets_api_key
 
 Then open `/google-sheets-import` in your app.
 
+## Todo
+- [ ] Find out why 'addTemplate' adds the example file to the module root/utils (unintended) as well as the consuming app utils folder (intended). 
+- [ ] Check page overrides are working as expected.
+- [ ] Should @nuxt/ui be a dependency or should it just install? Pretty heavy for one page
+- [ ] Check that development mode is the only mode the module runs in. If not, add safeguards to prevent unintended file writes in production.
+
 ## Repository Development
 
 Development commands:

package/dist/module.mjs

@@ -18,7 +18,7 @@ const module$1 = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     addTemplate({
       filename: "googleSheetsImportSchemas.ts",
-      src: resolver.resolve("./runtime/app/examples/googleSheetsImportSchemas.ts"),
+      src: resolver.resolve("./runtime/app/examples/googleSheetsImportSchemas"),
       dst: "utils/.googleSheetsImportSchemas.ts",
       write: true
     });

package/dist/runtime/app/components/GoogleSheetsImportSchemaGuide.vue

@@ -1,14 +1,11 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
-import { useToast } from "#imports";
+import { onMounted, ref, watch } from "vue";
 import { useGoogleSheetsImport } from "../composables/useGoogleSheetsImport";
-import { copyTextWithSuccessToast } from "../utils/clipboard";
 import { toTsvRow } from "../utils/delimited";
 const props = defineProps({
   initialSchema: { type: String, required: false, default: "" }
 });
 const { getSchemaColumns } = useGoogleSheetsImport();
-const toast = useToast();
 const selectedSchema = ref("");
 const availableSchemas = ref([]);
 const columns = ref([]);
@@ -16,10 +13,7 @@ const collectionType = ref("unknown");
 const pageOverrideColumns = ref([]);
 const status = ref("idle");
 const error = ref("");
-const schemaOptions = computed(() => availableSchemas.value.map((schema) => ({
-  label: schema,
-  value: schema
-})));
+const copyFeedback = ref("");
 async function loadSchemas() {
   status.value = "pending";
   error.value = "";
@@ -63,131 +57,161 @@ onMounted(async () => {
     await loadColumns(selectedSchema.value);
   }
 });
+async function copyText(text, successMessage) {
+  if (!text) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    copyFeedback.value = successMessage;
+  } catch {
+    copyFeedback.value = "Could not copy to clipboard.";
+  }
+}
 async function copyColumns() {
-  await copyTextWithSuccessToast({
-    text: columns.value.join("\n"),
-    toast,
-    description: "Column names copied to clipboard.",
-    title: "Copied"
-  });
+  await copyText(columns.value.join("\n"), "Column names copied to clipboard.");
 }
 async function copyColumnsTsv() {
-  await copyTextWithSuccessToast({
-    text: toTsvRow(columns.value),
-    toast,
-    description: "Column names copied as a tab-separated row for Google Sheets.",
-    title: "Copied"
-  });
+  await copyText(toTsvRow(columns.value), "Column names copied as a tab-separated row for Google Sheets.");
 }
 async function copyPageOverrideColumns() {
-  await copyTextWithSuccessToast({
-    text: pageOverrideColumns.value.join("\n"),
-    toast,
-    description: "Page override column names copied to clipboard.",
-    title: "Copied"
-  });
+  await copyText(pageOverrideColumns.value.join("\n"), "Page override column names copied to clipboard.");
 }
 async function copyPageOverrideColumnsTsv() {
-  await copyTextWithSuccessToast({
-    text: toTsvRow(pageOverrideColumns.value),
-    toast,
-    description: "Page override column names copied as a tab-separated row for Google Sheets.",
-    title: "Copied"
-  });
+  await copyText(toTsvRow(pageOverrideColumns.value), "Page override column names copied as a tab-separated row for Google Sheets.");
 }
 </script>
 
 <template>
-  <div class="space-y-4">
-    <UAlert
-      title="Schema column helper"
-      description="Choose a schema to see the expected Google Sheet column names."
-      color="neutral"
-      variant="subtle"
-    />
+  <div class="space-y-4 rounded-lg border border-gray-200 p-4 bg-white">
+    <div class="rounded-md border border-gray-200 bg-gray-50 p-3">
+      <p class="text-sm font-semibold text-gray-900">
+        Schema column helper
+      </p>
+      <p class="text-sm text-gray-600">
+        Choose a schema to see the expected Google Sheet column names.
+      </p>
+    </div>
 
-    <UAlert
+    <div
       v-if="error"
-      title="Could not load schema information"
-      :description="error"
-      color="error"
-      variant="subtle"
-    />
-
-    <UFormField
-      label="Collection schema"
-      name="schema"
-      description="Pick the schema you want to import."
+      class="rounded-md border border-red-200 bg-red-50 p-3"
     >
-      <USelect
+      <p class="text-sm font-semibold text-red-900">
+        Could not load schema information
+      </p>
+      <p class="text-sm text-red-700">
+        {{ error }}
+      </p>
+    </div>
+
+    <div class="space-y-1">
+      <label
+        for="schema-select"
+        class="block text-sm font-medium text-gray-800"
+      >
+        Collection schema
+      </label>
+      <p class="text-xs text-gray-500">
+        Pick the schema you want to import.
+      </p>
+      <select
+        id="schema-select"
         v-model="selectedSchema"
-        :items="schemaOptions"
-        value-key="value"
-        icon="i-heroicons-cube-20-solid"
-        class="w-full max-w-sm"
-        :loading="status === 'pending'"
-      />
-    </UFormField>
+        class="w-full max-w-sm rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900"
+        :disabled="status === 'pending' || !availableSchemas.length"
+      >
+        <option
+          v-if="!availableSchemas.length"
+          value=""
+        >
+          {{ status === "pending" ? "Loading schemas..." : "No schemas found" }}
+        </option>
+        <option
+          v-for="schema in availableSchemas"
+          :key="schema"
+          :value="schema"
+        >
+          {{ schema }}
+        </option>
+      </select>
+    </div>
 
-    <UAlert
+    <div
       v-if="status === 'success' && selectedSchema"
-      title="Expected column names"
-      :description="`Use these exact headers in your Google Sheet for schema: ${selectedSchema}.`"
-      color="neutral"
-      variant="subtle"
-    />
+      class="rounded-md border border-gray-200 bg-gray-50 p-3"
+    >
+      <p class="text-sm font-semibold text-gray-900">
+        Expected column names
+      </p>
+      <p class="text-sm text-gray-600">
+        Use these exact headers in your Google Sheet for schema: {{ selectedSchema }}.
+      </p>
+    </div>
+
+    <p
+      v-if="copyFeedback"
+      class="text-sm text-green-700"
+      role="status"
+    >
+      {{ copyFeedback }}
+    </p>
 
     <div
       v-if="columns.length"
       class="space-y-3"
     >
       <div class="flex flex-wrap gap-2">
-        <UButton
-          label="Copy column names"
-          icon="i-heroicons-clipboard-document-20-solid"
-          color="neutral"
-          variant="subtle"
+        <button
+          type="button"
+          class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 hover:bg-gray-50"
           @click="copyColumns"
-        />
-        <UButton
-          label="Copy as tab-separated row"
-          icon="i-heroicons-table-cells-20-solid"
-          color="neutral"
-          variant="subtle"
+        >
+          Copy column names
+        </button>
+        <button
+          type="button"
+          class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 hover:bg-gray-50"
           @click="copyColumnsTsv"
-        />
+        >
+          Copy as tab-separated row
+        </button>
       </div>
-      <pre class="text-xs whitespace-pre-wrap">{{ columns.join("\n") }}</pre>
+      <pre class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs whitespace-pre-wrap text-gray-800">{{ columns.join("\n") }}</pre>
 
-      <UAlert
+      <div
         v-if="collectionType === 'page' && pageOverrideColumns.length"
-        title="Nuxt Content page overrides"
-        description="Optional built-in page fields Nuxt Content adds automatically for page collections."
-        color="neutral"
-        variant="subtle"
-      />
+        class="rounded-md border border-gray-200 bg-gray-50 p-3"
+      >
+        <p class="text-sm font-semibold text-gray-900">
+          Nuxt Content page overrides
+        </p>
+        <p class="text-sm text-gray-600">
+          Optional built-in page fields Nuxt Content adds automatically for page collections.
+        </p>
+      </div>
 
       <div
         v-if="collectionType === 'page' && pageOverrideColumns.length"
         class="space-y-3"
       >
         <div class="flex flex-wrap gap-2">
-          <UButton
-            label="Copy page override columns"
-            icon="i-heroicons-clipboard-document-list-20-solid"
-            color="neutral"
-            variant="subtle"
+          <button
+            type="button"
+            class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 hover:bg-gray-50"
             @click="copyPageOverrideColumns"
-          />
-          <UButton
-            label="Copy overrides as tab-separated row"
-            icon="i-heroicons-table-cells-20-solid"
-            color="neutral"
-            variant="subtle"
+          >
+            Copy page override columns
+          </button>
+          <button
+            type="button"
+            class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 hover:bg-gray-50"
             @click="copyPageOverrideColumnsTsv"
-          />
+          >
+            Copy overrides as tab-separated row
+          </button>
         </div>
-        <pre class="text-xs whitespace-pre-wrap">{{ pageOverrideColumns.join("\n") }}</pre>
+        <pre class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs whitespace-pre-wrap text-gray-800">{{ pageOverrideColumns.join("\n") }}</pre>
       </div>
     </div>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-google-sheets-import",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Schema-driven Google Sheets import module for Nuxt Content",
   "repository": "tribeweb/nuxt-google-sheets-import",
   "license": "MIT",