nuxt-ignis 0.3.3 → 0.4.0-rc.2

package/.nuxt/ui/timeline.ts

@@ -0,0 +1,321 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "flex gap-1.5",
+    "item": "group relative flex flex-1 gap-3",
+    "container": "relative flex items-center gap-1.5",
+    "indicator": "group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted",
+    "separator": "flex-1 rounded-full bg-elevated",
+    "wrapper": "w-full",
+    "date": "text-dimmed text-xs/5",
+    "title": "font-medium text-highlighted text-sm",
+    "description": "text-muted text-wrap text-sm"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex-row w-full",
+        "item": "flex-col",
+        "separator": "h-0.5"
+      },
+      "vertical": {
+        "root": "flex-col",
+        "container": "flex-col",
+        "separator": "w-0.5"
+      }
+    },
+    "color": {
+      "primary": {
+        "indicator": "group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"
+      },
+      "secondary": {
+        "indicator": "group-data-[state=completed]:bg-secondary group-data-[state=active]:bg-secondary"
+      },
+      "success": {
+        "indicator": "group-data-[state=completed]:bg-success group-data-[state=active]:bg-success"
+      },
+      "info": {
+        "indicator": "group-data-[state=completed]:bg-info group-data-[state=active]:bg-info"
+      },
+      "warning": {
+        "indicator": "group-data-[state=completed]:bg-warning group-data-[state=active]:bg-warning"
+      },
+      "error": {
+        "indicator": "group-data-[state=completed]:bg-error group-data-[state=active]:bg-error"
+      },
+      "neutral": {
+        "indicator": "group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"
+      }
+    },
+    "size": {
+      "3xs": "",
+      "2xs": "",
+      "xs": "",
+      "sm": "",
+      "md": "",
+      "lg": "",
+      "xl": "",
+      "2xl": "",
+      "3xl": ""
+    },
+    "reverse": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-primary"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-secondary"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-success"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-info"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-warning"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-error"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-secondary group-data-[state=completed]:bg-secondary"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-success group-data-[state=completed]:bg-success"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-info group-data-[state=completed]:bg-info"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-warning group-data-[state=completed]:bg-warning"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-error group-data-[state=completed]:bg-error"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-inverted"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "3xs" as typeof size[number],
+      "class": {
+        "wrapper": "pe-4.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "2xs" as typeof size[number],
+      "class": {
+        "wrapper": "pe-5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": {
+        "wrapper": "pe-5.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": {
+        "wrapper": "pe-6"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": {
+        "wrapper": "pe-6.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": {
+        "wrapper": "pe-7"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": {
+        "wrapper": "pe-7.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "2xl" as typeof size[number],
+      "class": {
+        "wrapper": "pe-8"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "3xl" as typeof size[number],
+      "class": {
+        "wrapper": "pe-8.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "3xs" as typeof size[number],
+      "class": {
+        "wrapper": "-mt-0.5 pb-4.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "2xs" as typeof size[number],
+      "class": {
+        "wrapper": "pb-5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": {
+        "wrapper": "mt-0.5 pb-5.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": {
+        "wrapper": "mt-1 pb-6"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": {
+        "wrapper": "mt-1.5 pb-6.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": {
+        "wrapper": "mt-2 pb-7"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": {
+        "wrapper": "mt-2.5 pb-7.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "2xl" as typeof size[number],
+      "class": {
+        "wrapper": "mt-3 pb-8"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "3xl" as typeof size[number],
+      "class": {
+        "wrapper": "mt-3.5 pb-8.5"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number]
+  }
+}

package/.nuxt/ui/toaster.ts

@@ -17,7 +17,7 @@ const swipeDirection = [
 export default {
   "slots": {
     "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
-    "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   "variants": {
     "position": {

package/.nuxt/ui-image-component.ts

@@ -1 +1 @@
-export { default } from "C:/Git/nuxt-ignis/core/node_modules/.pnpm/@nuxt+image@1.10.0_@netlify_b4a362fadc10aa100425ec080018ae5f/node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue";
+export { default } from "C:/Git/nuxt-ignis/core/node_modules/.pnpm/@nuxt+image@1.10.0_@netlify_50d57983e0799a62bc0b2b1b9b64ff97/node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue";

package/app.vue

@@ -1,20 +1,16 @@
 <template>
   <UApp v-if="ui">
     <NuxtPage v-if="pages" />
-    <IgnisInfo v-else />
+    <IgnisInfo v-else :content="'Welcome'" />
   </UApp>
   <div v-else>
     <NuxtPage v-if="pages" />
-    <IgnisInfo v-else />
+    <IgnisInfo v-else :content="'Welcome'" />
   </div>
 </template>
 
 <script setup lang="ts">
 useHead({
-  title: useAppConfig().textTitle,
-  htmlAttrs: {
-    lang: 'en',
-  },
   bodyAttrs: {
     class: 'ignis-body',
   },

package/assets/css/ignis-nuxt-ui.css

@@ -0,0 +1,24 @@
+/*
+  This will import Tailwind CSS for Nuxt UI
+  https://ui.nuxt.com/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css
+
+  NUXT_PUBLIC_IGNIS_PRESET_UI=nuxt-ui or NUXT_PUBLIC_IGNIS_UI=true is required for se this feature
+
+  If enabled, this file will be included in `css` section of nuxt.config.ts.
+  If only Tailwind is enabled, `ignis-tailwind.css` will be used instead.
+*/
+
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+/*
+// Tailwind v4 way of defining custom c.lasses
+@utility <name> {
+  // css rules here
+}
+*/
+
+/* 
+// Tailwind v3 config file can be referenced like this for legacy reasons
+@config "./path/to/tailwind.config.ts";
+*/

package/assets/css/{open-props.css → ignis-open-props.css}

@@ -8,7 +8,7 @@
 @import "open-props/normalize";
 @import "open-props/buttons";
 
-/* demo class - used in AppFeature component instance */
+/* demo class - used in IgnisFeature component instance */
 .openprops-feature {
 
   /* https://open-props.style/#gradients */

package/assets/css/ignis-tailwind.css

@@ -0,0 +1,23 @@
+/*
+  This will import Tailwind CSS
+  https://tailwindcss.com/docs/installation/
+
+  NUXT_PUBLIC_IGNIS_PRESET_UI=tailwind or NUXT_PUBLIC_IGNIS_TAILWIND=true is required for se this feature.
+
+  If enabled, this file will be included in `css` section of nuxt.config.ts.
+  If Nuxt UI is enabled, `ignis-nuxt-ui.css` will be used instead.
+*/
+
+@import "tailwindcss";
+
+/*
+// Tailwind v4 way of defining custom classes
+@utility <name> {
+  // css rules here
+}
+*/
+
+/* 
+// Tailwind v3 config file can be referenced like this for legacy reasons
+@config "./path/to/tailwind.config.ts";
+*/

package/assets/css/ignis.css

@@ -0,0 +1,31 @@
+/* based on https://www.howtogeek.com/get-a-clean-attractive-site-with-lines-of-css/ */
+
+html {
+    box-sizing: border-box;
+    max-width: 80ch;
+    margin: auto;
+    font-size: 1.2em;
+    color: #333;
+    line-height: 1.4;
+}
+
+* {
+    box-sizing: inherit;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: sans-serif;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}

package/bin/make-eslint.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+// CLI tool to create an ESLint configuration file with Nuxt Ignis defaults
+// usage: `npx make-eslint` in target folder
+
+import { existsSync } from 'fs'
+import { copyFile } from 'fs/promises'
+import path from 'path'
+import readline from 'readline'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const templatePath = path.resolve(__dirname, '../eslint.config.mjs')
+const targetPath = path.resolve(process.cwd(), 'eslint.config.mjs')
+
+function prompt(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  })
+
+  return new Promise((resolve) => {
+    rl.question(question + ' (y/N): ', (answer) => {
+      rl.close()
+      resolve(/^y(es)?$/i.test(answer.trim()))
+    })
+  })
+}
+
+async function main() {
+  if (!existsSync(templatePath)) {
+    console.error(`Template file not found at ${templatePath}`)
+    process.exit(1)
+  }
+
+  if (existsSync(targetPath)) {
+    const shouldOverwrite = await prompt(
+      `'eslint.config.mjs' already exists. Overwrite?`,
+    )
+    if (!shouldOverwrite) {
+      console.log('Aborted.')
+      process.exit(0)
+    }
+  }
+
+  await copyFile(templatePath, targetPath)
+  console.log('eslint.config.mjs created successfully.')
+}
+
+main().catch((err) => {
+  console.error('Error:', err)
+  process.exit(1)
+})

package/components/CurrentTime.vue

@@ -7,10 +7,12 @@
 -->
 
 <template>
-  <div style="text-align: center;">
-    Current time with <NuxtLink to="https://nuxt.com/docs/api/components/nuxt-time">NuxtTime</NuxtLink>:
+  <div style="text-align: center; font-size: 0.8em;">
+    Current datetime with <NuxtLink to="https://nuxt.com/docs/api/components/nuxt-time">NuxtTime</NuxtLink>:
     <NuxtTime
       :datetime="currentDate"
+      hour-cycle="h24"
+      locale="en-CA"
       year="numeric"
       month="2-digit"
       day="2-digit"

package/components/ignis/IgnisConfig.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="margin: 0 auto; max-width: 800px;">
+    <h1 class="ignis-config-header">
+      Configuration Overview
+    </h1>
+    <div class="ignis-config-subheader">
+      {{ useIgnisT('config.header') }}
+    </div>
+    <pre class="ignis-config">{{ ignisConfig || error }};</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+const requestURL = useRequestURL()
+const baseURL = `${requestURL.protocol}//${requestURL.host}`
+const { data: ignisConfig, error } = await useFetch('/_ignis-config.json', {
+  baseURL,
+})
+</script>
+
+<style scoped lang="css">
+.ignis-config-header {
+  text-align: center;
+  font-family: monospace;
+  font-size: 1.75rem;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  color: #fbbf24;
+}
+
+.ignis-config-subheader {
+  text-align: center;
+}
+
+.ignis-config {
+  border: 1px white;
+  background-color: gray;
+  color: white;
+  padding: 1rem;
+  margin: 1rem 0;
+  text-align: left;
+  white-space: pre-wrap;
+}
+</style>

package/components/{AppFeature.vue → ignis/IgnisFeature.vue}

@@ -69,7 +69,7 @@ log.debug(props.optionalText)
 <style scoped>
 /* avoid Tailwind CSS styles here, because Tailwind may not be enabled */
 
-/* m-1! px-2 py-1 border! border-amber-300 font-bold text-lg text-feature bg-emerald-700 hover:bg-slate-700 */
+/* m-1! px-2 py-1 border! border-amber-300 font-bold text-lg bg-emerald-700 hover:bg-slate-700 */
 .feature {
   margin: 4px;
   padding: 4px 12px;
@@ -83,6 +83,7 @@ log.debug(props.optionalText)
 .feature:hover {
   background-color: #334155;
   color: #3CB371;
+  text-decoration: none;
 }
 
 /* text-gray-700 bg-gray-300! hover:bg-slate-400! */