stacks 0.56.24 → 0.58.18

package/core/src/tables/src/components/TableHead.stx

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// import { useTable } from '../table'
+
+// const { table, isColumnSortable, isColumnUsedAsSort, toggleSort, indeterminate, hits, lastColumn, readableLastColumn } = await useTable()
+</script>
+
+<template>
+  <thead class="bg-gray-50">
+    <tr>
+      <th
+        scope="col"
+        class="relative w-12 px-6 sm:px-8 sm:w-16"
+      >
+        <!-- <input type="checkbox"
+          class="absolute w-4 h-4 -mt-2 text-blue-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-blue-500"
+          :checked="indeterminate || table.selectedRows?.length === hits.length" :indeterminate="indeterminate"
+          @change="table.selectedRows = ($event?.target as any).checked ? hits.map((h) => h.id) : []"
+        > -->
+        <!-- <input
+          type="checkbox"
+          class="absolute w-4 h-4 -mt-2 text-blue-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-blue-500"
+          :checked="indeterminate || selectedRows?.length === hits?.length"
+          :indeterminate="indeterminate"
+          @change="selectedRows = []"
+        > -->
+      </th>
+
+      <!-- <th v-for="(col, index) in table.columns" :key="index" scope="col"
+        class="font-semibold text-left text-sm py-3.5 pr-3 pl-4 sm:pl-6 text-gray-900"
+        :class="index === 0 ? `pr-3 pl-4 sm:pl-6` : `px-3`" @click="toggleSort(col)">
+        the last column is oftentimes styled slightly different
+
+        <a href="#" class="inline-flex group">
+          {{ col.includes(':') ? col.split(':')[1].trim() : col }}
+          <span v-if="isColumnSortable(col)" class="flex-none ml-2 rounded"
+            :class="isColumnUsedAsSort(col) ? `bg-gray-200 text-gray-900 group-hover:bg-gray-300` : `text-gray-400 invisible group-hover:visible group-focus:visible`"
+            @click="toggleSort(col)">
+            <div v-if="table.sort?.includes('desc')" class="w-5 h-5 i-heroicons-solid-chevron-down" />
+            <div v-if="table.sort?.includes('asc')" class="w-5 h-5 i-heroicons-solid-chevron-up" />
+          </span>
+        </a>
+      </th> -->
+
+      <th class="font-semibold text-left text-sm py-3.5 pr-3 pl-4 sm:pl-6 text-gray-900">
+        <a
+          href="#"
+          class="inline-flex group"
+        >
+          <!-- {{ readableLastColumn }}
+          <span v-if="isColumnSortable(lastColumn[0])"
+            :class="isColumnUsedAsSort(lastColumn) ? `bg-gray-200 text-gray-900 group-hover:bg-gray-300` : `text-gray-400 invisible group-hover:visible group-focus:visible`"
+            @click="toggleSort(lastColumn[0])">
+            <div v-if="table.sort?.includes('desc')" class="w-5 h-5 i-heroicons-solid-chevron-down" />
+            <div v-if="table.sort?.includes('asc')" class="w-5 h-5 i-heroicons-solid-chevron-up" />
+          </span> -->
+        </a>
+      </th>
+    </tr>
+  </thead>
+</template>

package/core/src/tables/src/components/TablePagination.stx

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+// const emit = defineEmits(['paginateToNextPage', 'paginateToPreviousPage', 'paginateToPage'])
+
+// const { goToNextPage, goToPrevPage, goToPage, table, lastPageNumber, views } = await useTable()
+
+// watch(totalPages, (newValue, oldValue) => {
+//   // eslint-disable-next-line no-console
+//   console.log('totalPages', totalPages.value)
+
+//   // eslint-disable-next-line no-console
+//   console.log('oldValue', oldValue)
+
+//   // eslint-disable-next-line no-console
+//   console.log('newValue', newValue)
+// })
+
+// const isFirstPage = computed(() => {
+//   if (table.currentPage === 1)
+//     return true
+
+//   return false
+// })
+
+// const isLastPage = computed(() => {
+//   if (table.currentPage === totalPages.value)
+//     return true
+
+//   return false
+// })
+
+// console.log('views', views.value)
+
+// function next() {
+//   goToNextPage()
+//   emit('paginateToNextPage')
+// }
+
+// function back() {
+//   goToPrevPage()
+//   emit('paginateToPreviousPage')
+// }
+
+// function paginateTo(page: number) {
+//   goToPage(page)
+//   emit('paginateToPage', page)
+// }
+
+// const currentCount = computed(() => {
+//   const count = table.perPage * table.currentPage
+//   const nbHits = table.results?.nbHits || 1
+
+//   return count > nbHits ? table.results?.nbHits : count
+// })
+</script>
+
+<template>
+  <div class="bg-white flex border-gray-200 py-3 items-center justify-end">
+    <!-- <div class="flex flex-1 justify-between sm:hidden">
+      <a href="#"
+        class="bg-white border rounded-md font-medium border-gray-300 text-sm py-2 px-4 text-gray-700 relative inline-flex items-center hover:bg-gray-50"
+        @click.prevent="goToPrevPage()">
+        Previous
+      </a>
+      <a href="#"
+        class="bg-white border rounded-md font-medium border-gray-300 text-sm ml-3 py-2 px-4 text-gray-700 relative inline-flex items-center hover:bg-gray-50"
+        @click.prevent="goToNextPage()">
+        Next
+      </a>
+    </div> -->
+    <div
+      class="min-w-full py-2 hidden inline-block align-middle sm:flex sm:flex-1 sm:items-center sm:justify-between md:px-6 lg:px-8"
+    >
+      <div>
+        <!-- <p class="text-sm text-gray-700">
+          Showing {{ ((table.perPage * table.currentPage) - table.perPage) + 1 }}
+          <span class="font-medium" />
+          to
+          <span class="font-medium"> {{ currentCount }} </span>
+          of
+          <span class="font-medium"> {{ table.results?.nbHits ?? 0 }} </span>
+          results
+        </p> -->
+      </div>
+
+      <div>
+        <nav
+          class="-space-x-px rounded-md shadow-sm z-0 relative inline-flex"
+          aria-label="Pagination"
+        >
+          <!-- <a href="#"
+            class="bg-white border rounded-l-md font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center hover:bg-gray-50"
+            @click.prevent="paginateTo(1)">
+            <span class="sr-only">First</span>
+            <div class="h-4 w-5 i-heroicons-solid-chevron-double-left" />
+          </a>
+          <a href="#"
+            class="bg-white border font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center hover:bg-gray-50"
+            @click.prevent="back()">
+            <span class="sr-only">Previous</span>
+            <div class="h-5 w-5 i-heroicons-solid-chevron-left" />
+          </a> -->
+
+          <!-- Current: "z-10 bg-blue-50 border-blue-500 text-blue-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+          <!-- <a v-for="page in views" :key="page" href="#" aria-current="page"
+            :class="[table.currentPage === page && 'border bg-yellow-500 border-yellow-500 text-gray-900 z-10']"
+            class="border border-gray-300 text-gray-500 font-medium text-sm py-2 px-4 relative inline-flex items-center underline-transparent"
+            @click.prevent="paginateTo(page)">
+            {{ page }}
+          </a> -->
+          <!-- <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 relative inline-flex items-center underline-transparent hover:bg-gray-50"> 2 </a>
+          <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 hidden relative items-center underline-transparent md:inline-flex hover:bg-gray-50"> 3 </a>
+          <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 hidden relative items-center underline-transparent md:inline-flex hover:bg-gray-50"> 4 </a>
+          <a href="#" class="bg-white border font-medium border-gray-300 text-sm py-2 px-4 text-gray-500 hidden relative items-center underline-transparent md:inline-flex hover:bg-gray-50"> 5 </a> -->
+
+          <!-- <a href="#"
+            class="bg-white border font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center underline-transparent hover:bg-gray-50"
+            @click.prevent="next()">
+            <span class="sr-only">Next</span>
+            <div class="h-5 w-5 i-heroicons-solid-chevron-right" />
+          </a>
+          <a href="#"
+            class="bg-white border rounded-r-md font-medium border-gray-300 text-sm py-2 px-2 text-gray-500 relative inline-flex items-center underline-transparent hover:bg-gray-50"
+            @click.prevent="paginateTo(lastPageNumber)">
+            <span class="sr-only">Last</span>
+            <div class="h-4 w-5 i-heroicons-solid-chevron-double-right" />
+          </a> -->
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>

package/core/src/tables/src/components/TableRow.stx

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// import type { Hit } from '@stacksjs/types'
+
+// const { hit, index } = defineProps<{ hit: Hit; index: number }>()
+
+// const { table, columnName } = await useTable()
+
+// let's generate the value of the row
+// function generateValue(hit: any, col: any) {
+//   if (col.includes(':'))
+//     return hit[col.split(':')[0].trim()]
+
+//   return JSON.parse(hit[col])
+// }
+
+// function getClass(index: number) {
+//   if (index % 2 !== 0)
+//     return 'bg-gray-200'
+
+//   return 'bg-gray-50'
+// }
+</script>
+
+<template>
+  <div />
+  <!-- <tr
+    scope="row"
+    :class="getClass(index)"
+    :data-index="index"
+  >
+    <td class="relative w-12 px-6 sm:px-8 sm:w-16">
+      <div
+        v-if="table.selectedRows?.includes(hit.id)"
+        class="bg-blue-600 inset-y-0 left-0 w-0.5 absolute"
+      />
+      <input
+        v-model="table.selectedRows"
+        :value="hit.id"
+        type="checkbox"
+        class="absolute w-4 h-4 -mt-2 text-blue-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-blue-500"
+      >
+    </td>
+
+    <td
+      v-for="(col, x) in table.columns"
+      :key="x"
+      class="py-4 text-sm font-medium text-gray-900 whitespace-nowrap "
+      :class="table.columns.length === x - 1 ? 'table-last-column pr-4 text-right sm:pr-6' : 'pr-3 pl-4 sm:pl-6'"
+    >
+     last columns oftentimes are styled slightly different
+  <span v-if="(table.columns.length === x + 1) && (table.actionable || table.actions)">
+        <slot name="action_column" :row-data="hit">
+          <TableCellActionItems />
+        </slot>
+      </span>
+
+  <span>
+    <slot :name="columnName(col)" :col-data="generateValue(hit, col)">
+      {{ generateValue(hit, col) }}
+    </slot>
+  </span>
+  </td>
+
+  <td v-if="(table.actionable || table.actions)">
+    last columns oftentimes are styled slightly different
+    <span>
+      <slot name="action_column" :row-data="hit">
+        <TableCellActionItems />
+      </slot>
+    </span>
+  </td>
+  </tr> -->
+</template>

package/core/src/tables/src/components/TableSearch.stx

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// const { table } = await useTable()
+
+// const open = ref(false)
+</script>
+
+<template>
+  <div />
+  <!-- <div class="px-8 flex justify-between mx-auto max-w-7xl">
+    <div>
+      <input
+        v-model="table.query"
+        type="text"
+        class="block w-full shadow-sm focus:ring-blue-500 p-2 focus:border-blue-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
+        placeholder="type here"
+      >
+    </div>
+
+    <div>
+      <button
+        type="button"
+        class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        @click="open = !open"
+      >
+        Heroicon name: solid/mail
+        <svg
+          class="w-4 h-4"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
+          clip-rule="evenodd"
+        /></svg>
+      </button>
+    </div>
+  </div> -->
+</template>

package/core/src/tables/src/components/Tooltip.stx

@@ -0,0 +1,10 @@
+<template>
+  <ElTooltip
+    class="box-item"
+    effect="dark"
+    content="Top Left prompts info"
+    placement="top-start"
+  >
+    <ElButton>top-start</ElButton>
+  </ElTooltip>
+</template>

package/core/src/tables/src/components.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Demo: typeof import('./components/Demo.stx')['default']
+    README: typeof import('./components/README.md')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./components/Table.stx')['default']
+    TableBody: typeof import('./components/TableBody.stx')['default']
+    TableCellActionItems: typeof import('./components/TableCellActionItems.stx')['default']
+    TableFilters: typeof import('./components/TableFilters.stx')['default']
+    TableHead: typeof import('./components/TableHead.stx')['default']
+    TablePagination: typeof import('./components/TablePagination.stx')['default']
+    TableRow: typeof import('./components/TableRow.stx')['default']
+    TableSearch: typeof import('./components/TableSearch.stx')['default']
+    Tooltip: typeof import('./components/Tooltip.stx')['default']
+  }
+}

package/core/src/tables/src/config/tables.ts

@@ -0,0 +1,2 @@
+// buddy assets:publish --tag=tables -> a good way of filtering by referencing the name of the stacks project
+export {}

package/core/src/tables/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.stx'
+
+createApp(App).mount('#app')

package/core/src/tables/tests/example.test.ts

@@ -0,0 +1,5 @@
+describe('example test', () => {
+  it('assert', () => {
+    expect(1).toBe(1)
+  })
+})

package/core/src/tables/vite.config.ts

@@ -0,0 +1,84 @@
+import process from 'node:process'
+import { defineConfig, loadEnv } from 'vite'
+import type { BuildOptions as ViteBuildOptions } from 'vite'
+import Components from 'unplugin-vue-components/vite'
+import type { ViteConfig } from '../types/src'
+import { libraryEntryPath, libsPath, projectPath, storagePath } from '../path/src'
+import { app, library } from '../config/src'
+import { alias } from '../alias/src'
+import { autoImports, uiEngine } from '../vite/src'
+
+export const vueComponentsConfig: ViteConfig = {
+  envDir: projectPath(),
+  envPrefix: 'FRONTEND_',
+  publicDir: storagePath('public'),
+
+  server: {
+    host: app.url,
+    open: false,
+  },
+
+  resolve: {
+    dedupe: ['vue'],
+    alias,
+  },
+
+  optimizeDeps: {
+    exclude: ['stacks', 'vue', 'fsevents', 'emitter', '@stacksjs/utils', '@stacksjs/validation', '@stacksjs/vite', '@stacksjs/server', '@stacksjs/config', 'stacks/utils', 'stacks/validation'],
+  },
+
+  plugins: [
+    // preview(),
+    uiEngine(),
+    // cssEngine(),
+    autoImports(),
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ['stx', 'vue', 'md'],
+      // allow auto import and register components used in markdown
+      include: [/\.stx$/, /\.stx\?stx/, /\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: 'src/components.d.ts',
+    }),
+  ],
+
+  build: vueComponentsBuildOptions(),
+}
+
+export function vueComponentsBuildOptions(): ViteBuildOptions {
+  return {
+    outDir: libsPath('components/vue/dist'),
+    emptyOutDir: true,
+    lib: {
+      entry: libraryEntryPath('vue-components'),
+      name: library.vueComponents?.name,
+      formats: ['cjs', 'es'],
+      fileName: (format: string) => {
+        if (format === 'es')
+          return 'index.mjs'
+
+        if (format === 'cjs')
+          return 'index.cjs'
+
+        return 'index.?.js'
+      },
+    },
+
+    rollupOptions: {
+      external: ['vue', '@stacksjs/vite'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  }
+}
+
+export default defineConfig(({ command, mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, projectPath(), '') }
+
+  if (command === 'serve')
+    return vueComponentsConfig
+
+  return vueComponentsConfig
+})

package/core/src/testing/README.md

@@ -0,0 +1,59 @@
+# Stacks Testing
+
+wip
+
+## ☘️ Features
+
+wip
+
+- ⚡️
+
+wip
+
+## 🤖 Usage
+
+wip
+
+```bash
+bun install -d @stacksjs/testing
+```
+
+Now, you can use it in your project:
+
+```js
+import { tests } from '@stacksjs/testing'
+
+// wip
+```
+
+Learn more in the docs.
+
+## 🧪 Testing
+
+```bash
+bun test
+```
+
+## 📈 Changelog
+
+Please see our [releases](https://github.com/stacksjs/stacks/releases) page for more information on what has changed recently.
+
+## 🚜 Contributing
+
+Please review the [Contributing Guide](https://github.com/stacksjs/contributing) for details.
+
+## 🏝 Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
+
+[Discussions on GitHub](https://github.com/stacksjs/stacks/discussions)
+
+For casual chit-chat with others using this package:
+
+[Join the Stacks Discord Server](https://discord.gg/stacksjs)
+
+## 📄 License
+
+The MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/stacks/tree/main/LICENSE.md) for more information.
+
+Made with 💙

package/core/src/testing/build.ts

@@ -0,0 +1,8 @@
+import { log, runCommand } from '@stacksjs/cli'
+
+const result = await runCommand('bun build ./src/index.ts --outdir dist --format esm --external bun --external @playwright/test --target bun', {
+  cwd: import.meta.dir,
+})
+
+if (result.isErr())
+  log.error(result.error)

package/core/src/testing/dist/index.js

@@ -0,0 +1,6 @@
+// @bun
+// src/index.ts
+import * as feature from "@playwright/test";
+export {
+  feature
+};

package/core/src/testing/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@stacksjs/testing",
+  "type": "module",
+  "version": "0.58.18",
+  "description": "The Stacks way of testing.",
+  "author": "Chris Breuer",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/chrisbbreuer",
+  "homepage": "https://github.com/stacksjs/stacks/tree/main/storage/framework/core/src/testing#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stacksjs/stacks.git",
+    "directory": "./storage/framework/core/src/testing"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/stacks/issues"
+  },
+  "keywords": [
+    "tests",
+    "unit",
+    "feature",
+    "e2e",
+    "testing",
+    "utilities",
+    "functions",
+    "playwright",
+    "stacks"
+  ],
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "bun": "./src/*",
+      "import": "./dist/*"
+    }
+  },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "contributors": [
+    "Chris Breuer <chris@stacksjs.org>"
+  ],
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun --bun build.ts",
+    "typecheck": "bun --bun tsc --noEmit",
+    "prepublishOnly": "bun --bun run build"
+  },
+  "peerDependencies": {
+    "@playwright/test": "^1.40.1"
+  },
+  "dependencies": {
+    "@playwright/test": "^1.40.1"
+  },
+  "devDependencies": {
+    "@stacksjs/development": "workspace:*"
+  }
+}

package/core/src/testing/src/index.ts

@@ -0,0 +1,3 @@
+// export type { Expect, TestOptions as BunTestOptions, Test, Describe, Mock } from 'bun:test'
+// export { describe, test, it, afterEach, afterAll, beforeEach, beforeAll, jest, mock, expect, spyOn, setSystemTime } from 'bun:test'
+export * as feature from '@playwright/test'

package/core/src/tinker/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@stacksjs/tinker",
+  "type": "module",
+  "version": "0.58.18",
+  "description": "All you need to tinker.",
+  "author": "Chris Breuer",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/chrisbbreuer",
+  "homepage": "https://github.com/stacksjs/stacks/tree/main/storage/framework/core/stacks/tinker-app#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stacksjs/stacks.git",
+    "directory": "./storage/framework/core/tinker-app"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/stacks/issues"
+  },
+  "keywords": [
+    "tinker-stack",
+    "repl",
+    "ts",
+    "vue",
+    "stacks"
+  ],
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "contributors": [
+    "Chris Breuer <chris@stacksjs.org>"
+  ],
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "scripts": {
+    "build": "echo 'wip'",
+    "prepublishOnly": "bun --bun run build",
+    "typecheck": "bun --bun tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@stacksjs/desktop": "workspace:*",
+    "@stacksjs/repl": "workspace:*"
+  },
+  "devDependencies": {
+    "@stacksjs/development": "workspace:*"
+  }
+}