stacks 0.53.1 → 0.56.3

package/stacks/tables/src/components/TableHead.vue

@@ -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-indigo-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-indigo-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-indigo-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-indigo-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/stacks/tables/src/components/TablePagination.vue

@@ -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-indigo-50 border-indigo-500 text-indigo-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/stacks/tables/src/components/TableRow.vue

@@ -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-indigo-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-indigo-600 border-gray-300 rounded top-1/2 left-4 sm:left-6 focus:ring-indigo-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/stacks/tables/src/components/TableSearch.vue

@@ -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-indigo-500 p-2 focus:border-indigo-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-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-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/stacks/tables/src/components/Tooltip.vue

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

package/stacks/tables/src/config/tables.ts

@@ -0,0 +1 @@
+export {}

package/stacks/tables/src/functions/README.md

@@ -0,0 +1,8 @@
+# Your Functions Library
+
+You may use functions to share on npm or have them run on a server behind one of your `../routes`.
+
+Learn more about Stacks functions, check out the [documentation](https://stacks.ow3org.com).
+
+> **Note**
+> If your project does not require any routes, you can remove this folder._

package/stacks/tables/src/functions/dark.ts

@@ -0,0 +1,3 @@
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

package/stacks/tables/src/functions/index.ts

@@ -0,0 +1,2 @@
+export * from './dark'
+// export * from './table'

package/stacks/tables/src/functions/table.ts

@@ -0,0 +1,207 @@
+// import { calculatePagination, currentPage, filterName, totalPages } from '@stacksjs/search-engine'
+// import { isObject, isString, useStorage } from '@stacksjs/utils'
+// import type { Ref, TableStore } from '@stacksjs/types'
+// import { computed } from 'vue-demi'
+//
+// const table = (useStorage('table', determineState()).value as TableStore)
+//
+// // table related
+// export const filters = computed(() => table.filters)
+// export const goToNextPage = computed(() => table.goToNextPage)
+// export const goToPage = computed(() => table.goToPage)
+// export const goToPrevPage = computed(() => table.goToPrevPage)
+// export const hits = computed(() => table.hits)
+// export const index = computed(() => table.index)
+// export const lastPageNumber = computed(() => table.lastPageNumber)
+// export const perPage = computed(() => table.perPage)
+// export const query = computed(() => table.query)
+// export const results = computed(() => table.results)
+// export const search = computed(() => table.search)
+// export const searchFilters = computed(() => table.searchFilters)
+// export const searchParams = computed(() => table.searchParams)
+// export const setTotalHits = computed(() => table.setTotalHits)
+// export const sort = computed(() => table.sort)
+// export const sorts = computed(() => table.sorts)
+//
+// const columns = computed(() => table.columns)
+// const actions = computed(() => table.actions)
+// const actionable = computed(() => table.actionable)
+// const selectedRows = computed(() => table.selectedRows)
+// const selectedAll = computed(() => table.selectedAll)
+// const views: Ref<number[]> = ref([])
+// const indeterminate = computed(() => (table?.selectedRows?.length ?? 0) > 0 && (table?.selectedRows?.length ?? 0) < hits.value.length)
+// const lastColumn = computed(() => {
+//   return table.columns[table.columns.length - 1]
+// })
+// const readableLastColumn = computed(() => lastColumn[0]?.includes(':') ? lastColumn[0].split(':')[1].trim() : lastColumn[0])
+//
+// // this watchEffect picks up any reactivity changes from `query` and `searchParams` and it will then trigger a search
+// watchEffect(async () => {
+//   // console.log('watchEffect', query, searchParams)
+//
+//   const results = await search(query.value, searchParams.value)
+//
+//   if (results) {
+//     table.results = results
+//     table.hits = results.hits
+//   }
+//
+//   setTotalHits(table.results?.nbHits ?? 1)
+//   calculatePagination()
+// })
+//
+// watchDebounced(
+//   query,
+//   () => {
+//     // eslint-disable-next-line no-console
+//     console.log('watchDebounced')
+//
+//     if (table === undefined)
+//       return
+//
+//     if (isRef(table.query))
+//       table.query = query.value
+//   },
+//   { debounce: 500 },
+// )
+//
+// function determineState(): TableStore {
+//   const ls = localStorage.getItem('table')
+//
+//   if (isString(ls))
+//     return JSON.parse(ls)
+//
+//   // initial default state - overwrite with properties passed down from parent component
+//   const table: TableStore = {
+//     source: '',
+//     password: '',
+//     index: '',
+//     columns: [],
+//     filters: [],
+//     perPage: 20,
+//     currentPage: 1,
+//     query: '',
+//     goToNextPage: 2,
+//     goToPage: 1,
+//     goToPrevPage: 1,
+//     hits: [],
+//     lastPageNumber: 1,
+//     results: {},
+//     search: () => {},
+//     searchFilters: {},
+//     searchParams: {},
+//     setTotalHits: () => {},
+//   }
+//
+//   return table
+// }
+//
+// function isColumnSortable(col: string): Boolean {
+//   if (!hasTableLoaded(table))
+//     return false
+//
+//   if (col === undefined)
+//     return false
+//
+//   if (col.includes(':'))
+//     col = col.split(':')[0]
+//
+//   if (table.sorts?.includes(col))
+//     return true
+//
+//   return false
+// }
+//
+// function hasTableLoaded(state?: any): Boolean {
+//   if (state?.index !== '')
+//     return true
+//
+//   return isString(table?.index) && table.index !== '' // a lazy way to check if the table is loaded
+// }
+//
+// function isColumnUsedAsSort(col: string | object) {
+//   let sortKey
+//
+//   if (isObject(col))
+//     sortKey = col[0].includes(':') ? col[0].split(':')[0].trim() : col[0]
+//
+//   else
+//     sortKey = col.includes(':') ? col.split(':')[0].trim() : col
+//
+//   return table.sort?.includes(sortKey)
+// }
+//
+// function toggleSort(col: string | Ref<string>) {
+//   if (isRef(col))
+//     col = unref(col)
+//
+//   const sortKey = (col as string).includes(':') ? (col as string).split(':')[0].trim() : col
+//
+//   if (table.sort?.includes('desc')) {
+//     table.sort = `${sortKey}:asc`
+//
+//     // eslint-disable-next-line no-console
+//     console.log('sort included asc it is now desc for', sortKey)
+//
+//     return
+//   }
+//
+//   if (table.sort?.includes('asc')) {
+//     table.sort = undefined
+//
+//     // eslint-disable-next-line no-console
+//     console.log('sort included desc it is now "" for', sortKey)
+//
+//     return
+//   }
+//
+//   // eslint-disable-next-line no-console
+//   console.log('there was no sort. Setting it now in asc order for', sortKey)
+//
+//   table.sort = `${sortKey}:desc`
+//
+//   // eslint-disable-next-line no-console
+//   console.log('table.sort', table.sort)
+// }
+//
+// function columnName(col: string) {
+//   return col.split(':')[0].trim()
+// }
+//
+// export async function useTable(store?: TableStore) {
+//   return {
+//     store,
+//     table,
+//     index,
+//     columns,
+//     isColumnSortable,
+//     filters,
+//     sort,
+//     sorts,
+//     query,
+//     results,
+//     hits,
+//     perPage,
+//     currentPage,
+//     goToPrevPage,
+//     goToNextPage,
+//     goToPage,
+//     search,
+//     searchFilters,
+//     searchParams,
+//     toggleSort,
+//     isColumnUsedAsSort,
+//     actionable,
+//     actions,
+//     columnName,
+//     indeterminate,
+//     lastColumn,
+//     readableLastColumn,
+//     lastPageNumber,
+//     selectedRows,
+//     selectedAll,
+//     totalPages,
+//     views,
+//     filterName,
+//   }
+// }

package/stacks/tables/src/main.ts

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

package/stacks/tables/tests/example.test.ts

@@ -0,0 +1,7 @@
+import { assert, describe, test } from 'vitest'
+
+describe('example test', () => {
+  test('assert', () => {
+    assert.equal(1, 1)
+  })
+})

package/stacks/tables/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    hmr: {
+      overlay: false,
+    },
+  },
+  build: {
+    rollupOptions: {
+      external: ['vue', 'vue-demi', 'chalk', 'cac', 'human-signals', 'execa', 'node-ray', 'node:url'],
+      output: {
+        // exports: 'named',
+        globals: {
+          'vue': 'Vue',
+          'vue-demi': 'vue-demi',
+        },
+      },
+    },
+
+    sourcemap: true,
+    minify: true,
+  },
+})

package/stacks/tinker/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@stacksjs/tinker-app",
+  "type": "module",
+  "version": "0.51.0",
+  "packageManager": "pnpm@8.6.5",
+  "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/.stacks/stacks/tinker-app#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stacksjs/stacks.git",
+    "directory": "./.stacks/stacks/tinker-app"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/stacks/issues"
+  },
+  "keywords": [
+    "tinker-stack",
+    "repl",
+    "ts",
+    "vue",
+    "stacks"
+  ],
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "contributors": [
+    "Chris Breuer <chris@ow3.org>"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "echo 'wip'",
+    "dev": "echo 'wip'",
+    "prepublishOnly": "unbuild",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@stacksjs/desktop": "workspace:*",
+    "@stacksjs/repl": "workspace:*"
+  },
+  "devDependencies": {
+    "@stacksjs/development": "workspace:*"
+  }
+}

package/stacks/tinker/src/index.ts

@@ -0,0 +1 @@
+export {}