@squirkle-ui/nuxt 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KheangLov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,19 @@
-# Temporary Holding Version
+# @squirkle-ui/nuxt
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Nuxt 2, 3 and 4 module for Squirkle UI.
+
+```bash
+npm i @squirkle-ui/nuxt @squirkle-ui/ui
+```
+```ts
+// nuxt.config.ts (Nuxt 3 / 4)
+export default defineNuxtConfig({
+  modules: ['@squirkle-ui/nuxt'],
+  squirkle: { addons: ['datagrid', 'map'], theme: { defaultTheme: 'light' } },
+})
+
+// Nuxt 2: buildModules: [['@squirkle-ui/nuxt/nuxt2', { addons: ['datagrid'] }]]
+```
+Install each add-on you list in `addons` (`@squirkle-ui/datagrid`, `@squirkle-ui/map`, …). With `map`, the module also registers MapLibre's worker for you.
+
+Part of [Squirkle UI](https://github.com/KheangLov/squirkle-ui) · MIT License

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "@squirkle-ui/nuxt",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Nuxt 2, 3 and 4 module for Squirkle UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KheangLov/squirkle-ui.git",
+    "directory": "packages/nuxt"
+  },
+  "homepage": "https://github.com/KheangLov/squirkle-ui#readme",
+  "bugs": {
+    "url": "https://github.com/KheangLov/squirkle-ui/issues"
+  },
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "vue",
+    "squircle"
+  ],
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "main": "./src/nuxt2.cjs",
+  "exports": {
+    ".": {
+      "import": "./src/module.mjs"
+    },
+    "./nuxt2": "./src/nuxt2.cjs"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@squirkle-ui/ui": "^0.1.0"
+  },
+  "module": "./src/module.mjs",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/module.mjs

@@ -0,0 +1,80 @@
+// Nuxt 3 / Nuxt 4 module: auto-imports every Squirkle component, adds CSS and SSR theme variables.
+import { createRequire } from 'node:module'
+import { join } from 'node:path'
+import { addComponent, addPluginTemplate, defineNuxtModule, extendViteConfig } from '@nuxt/kit'
+
+// Add-on component names are listed statically so the module never has to load add-ons (or Leaflet CSS) in Node.
+const ADDON_COMPONENTS = {
+  datagrid: ['SqDataGrid'],
+  charts: ['SqLineChart', 'SqBarChart', 'SqDonutChart', 'SqSparkline'],
+  swiper: ['SqSwiper'],
+  calendar: ['SqCalendar'],
+  map: ['SqMap'],
+  icons: ['SqIconPicker'],
+}
+
+export default defineNuxtModule({
+  meta: { name: '@squirkle-ui/nuxt', configKey: 'squirkle', compatibility: { nuxt: '>=3.0.0' } },
+  defaults: { addons: [], prefix: 'Sq', css: true, theme: undefined, squircle: undefined, appearance: undefined, icons: undefined, locale: undefined },
+  async setup(options, nuxt) {
+    const addons = (options.addons ?? []).filter((a) => a in ADDON_COMPONENTS)
+    const pkgs = ['ui', ...addons]
+    const { componentNames: uiNames } = await import('@squirkle-ui/ui')
+    for (const pkg of pkgs) {
+      for (const name of pkg === 'ui' ? uiNames : ADDON_COMPONENTS[pkg]) {
+        addComponent({ name: name.replace(/^Sq/, options.prefix), export: name, filePath: `@squirkle-ui/${pkg}`, mode: pkg === 'map' ? 'client' : 'all' })
+      }
+    }
+    if (options.css) for (const pkg of pkgs) nuxt.options.css.push(`@squirkle-ui/${pkg}/styles.css`)
+    nuxt.options.build.transpile.push(...pkgs.map((p) => `@squirkle-ui/${p}`), '@squirkle-ui/core')
+    if (addons.includes('map')) addMapSupport(nuxt.options.rootDir)
+
+    const runtimeOptions = { theme: options.theme, squircle: options.squircle, appearance: options.appearance, icons: options.icons, locale: options.locale }
+    addPluginTemplate({
+      filename: 'squirkle.plugin.mjs',
+      getContents: () => `import { defineNuxtPlugin, useHead } from '#imports'
+import { createSquirkle, getThemeCss, config } from '@squirkle-ui/ui'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(createSquirkle({ ...${JSON.stringify(runtimeOptions)}, components: false }))
+  // Theme variables are generated from the app's own config (not user input).
+  useHead({
+    style: [{ id: 'sq-theme-vars', innerHTML: getThemeCss() }],
+    htmlAttrs: { class: 'sq-theme--' + config.theme.name },
+  })
+})
+`,
+    })
+  },
+})
+
+/**
+ * MapLibre starts its worker from `new URL('./maplibre-gl-worker.mjs', import.meta.url)`, a file no bundler copies:
+ * a client plugin passes a Vite `?url` of the worker to `setMapWorkerUrl` (served in dev, emitted on build).
+ * Dep pre-bundling would also move MapLibre into `.vite/deps`, so it stays excluded. The map's other deps are
+ * pre-bundled up front so Vite does not discover them at runtime and reload the page.
+ */
+function addMapSupport(rootDir) {
+  const require = createRequire(join(rootDir, 'package.json'))
+  const resolve = (id) => { try { return require.resolve(id) } catch { return null } }
+  const worker = resolve('maplibre-gl/dist/maplibre-gl-worker.mjs') // optional peers: maplibre-gl (vector), leaflet (raster)
+  const hasLeaflet = !!resolve('leaflet/package.json')
+  if (worker) {
+    addPluginTemplate({
+      filename: 'squirkle.map-worker.client.mjs',
+      mode: 'client',
+      getContents: () => `import { defineNuxtPlugin } from '#imports'
+import { setMapWorkerUrl } from '@squirkle-ui/map'
+import workerUrl from ${JSON.stringify(worker.replace(/\\/g, '/') + '?url')}
+
+export default defineNuxtPlugin(() => setMapWorkerUrl(workerUrl))
+`,
+    })
+  }
+  const add = (list = [], items) => [...list, ...items.filter((i) => !list.includes(i))]
+  extendViteConfig((config) => {
+    config.optimizeDeps = config.optimizeDeps || {}
+    config.optimizeDeps.exclude = add(config.optimizeDeps.exclude, ['maplibre-gl'])
+    config.optimizeDeps.include = add(config.optimizeDeps.include, ['@squirkle-ui/map > supercluster', ...(hasLeaflet ? ['leaflet'] : [])])
+  })
+}

package/src/nuxt2.cjs

@@ -0,0 +1,18 @@
+// Nuxt 2.17 (Vue 2.7) module: `buildModules: [['@squirkle-ui/nuxt/nuxt2', { addons: ['datagrid'] }]]`
+const path = require('path')
+
+const ADDONS = ['datagrid', 'charts', 'swiper', 'calendar', 'map', 'icons']
+
+module.exports = function squirkleNuxt2(moduleOptions) {
+  const options = { addons: [], css: true, ...(this.options.squirkle || {}), ...(moduleOptions || {}) }
+  const addons = (options.addons || []).filter((a) => ADDONS.includes(a))
+  const pkgs = ['ui'].concat(addons)
+  if (options.css) for (const pkg of pkgs) this.options.css.push(`@squirkle-ui/${pkg}/styles.css`)
+  this.options.build.transpile.push(/@squirkle-ui\//)
+  this.addPlugin({
+    src: path.resolve(__dirname, 'runtime/nuxt2-plugin.js'),
+    fileName: 'squirkle.js',
+    options: { addons, runtime: { theme: options.theme, squircle: options.squircle, appearance: options.appearance, icons: options.icons, locale: options.locale } },
+  })
+}
+module.exports.meta = { name: '@squirkle-ui/nuxt' }

package/src/runtime/nuxt2-plugin.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import { createSquirkle, getThemeCss, config } from '@squirkle-ui/ui/vue2'
+<% options.addons.forEach(function (a) { %>import * as addon_<%= a %> from '@squirkle-ui/<%= a %>/vue2'
+<% }) %>
+Vue.use(createSquirkle(<%= JSON.stringify(options.runtime) %>))
+<% options.addons.forEach(function (a) { %>for (const name of addon_<%= a %>.componentNames || []) Vue.component(name, addon_<%= a %>[name])
+<% }) %>
+export default ({ app }) => {
+  const head = (app.head = app.head || {})
+  head.style = (head.style || []).concat({ hid: 'sq-theme-vars', innerHTML: getThemeCss() })
+  // Theme CSS is generated from the app's own config (not user input), so it may skip vue-meta's sanitizer.
+  head.__dangerouslyDisableSanitizersByTagID = Object.assign({}, head.__dangerouslyDisableSanitizersByTagID, { 'sq-theme-vars': ['innerHTML'] })
+  head.htmlAttrs = Object.assign({}, head.htmlAttrs, { class: 'sq-theme--' + config.theme.name })
+}