stacks 0.53.1 → 0.56.3

package/stacks/tables/README.md

@@ -0,0 +1,109 @@
+# Table Stack
+
+The easy & modern way to work with tables of any size. Blazing-fast searching, filtering, sorting, and paginating. Powered by your search engine of choice. Kick-start the development of a feature-rich & configurable table UI, including a beautiful default UX.
+
+## 🐙 Features
+
+This Vue component library comes with the following features, improvements to the `table` element:
+
+- `<table-v2 />`
+  - quickly spin up a highly-configurable table UI without worrying about the backend
+  - "facet-filtering" & "table head sorting" natively built-in
+  - Meilisearch & Laravel Scout API compatible
+  - Enterprise-ready
+  - _Soon: Algolia & Typesense integration_
+
+Get granular control over the table appearance & behavior, with the following (optional) components:
+
+- `<table-search />`
+  - configure your search input for blazing fast search results
+
+- `<table-filters />`
+  - overwrite the default display of your table's filters
+
+- `<table-pagination />`
+  - easily configure the pagination of your table
+
+- `<table-configure />`
+  - simple way to configure the table in HTML semantic fashion
+
+Read more about these features in their respective [docs](https://ow3.org/docs).
+
+## 💡 Get Started
+
+To get started, you simply need to install the `@ow3/table-vue` npm package.
+
+```bash
+npm install @ow3/table-vue
+```
+
+Next up, we need to make use of the components.
+
+```vue
+<script setup>
+import { Table as TableV2 } from 'table-vue'
+</script>
+
+<template>
+  <!-- the `type`-property indicates to to the search engine the "index" you want to target -->
+  <TableV2 type="movies" />
+
+  <!-- these are the default properties (all of them are optional)  -->
+  <TableV2
+    source="127.0.0.1:7700"
+    columns="*"
+    :searchable="true"
+    :filterable="true"
+    :sortable="true"
+    :actionable="true"
+    :selectable="false"
+    :per-page="20"
+  />
+
+  <!-- another "data table" example -->
+  <TableV2
+    source="127.0.0.1:7700"
+    password="NtUvZv5Q87e355b807622149c350ac38679645b4e2603a1d3eb48cda080f977e76329aeb"
+    type="orders"
+    columns="id: Order, customer_name: Customer, customer_po: PO#, part_name: Part, created_at: Ordered, due_at: Due, stage_name: Status"
+    sort="id:desc"
+    sorts="id, customer_name, customer_po, part_name, stage_name, due_at, created_at"
+    filters="customer_name, vendor_name, part_name, document_types"
+    actions="Edit"
+    per-page="10"
+    selectable="true"
+  />
+</template>
+```
+
+To learn more about what's possible & how to best build modern data tables, check out our documentation.
+
+## 🧪 Testing
+
+```bash
+yarn test
+```
+
+## 📈 Changelog
+
+Please see our [releases](https://github.com/stacksjs/table/releases) page for more information on what has changed recently.
+
+## 🚜 Contributing
+
+Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
+
+## 🏝 Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
+
+[Table Elements on GitHub](https://github.com/stacksjs/table/discussions)
+
+For casual chit-chat with others using this package:
+
+[Join the Open Web Discord Server](https://discord.ow3.org)
+
+## 📄 License
+
+The MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.
+
+Made with ❤️ by Open Web Labs.

package/stacks/tables/build.config.ts

@@ -0,0 +1,16 @@
+import { defineBuildConfig } from '@stacksjs/development'
+import { alias } from '@stacksjs/alias'
+
+export default defineBuildConfig({
+  alias,
+  entries: [
+    './src/index',
+  ],
+  declaration: false,
+  clean: false,
+  externals: ['chalk'],
+  rollup: {
+    emitCJS: true,
+    inlineDependencies: true,
+  },
+})

package/stacks/tables/examples/vue/App.vue

@@ -0,0 +1,12 @@
+<!--
+  This is how you would implement your generated
+  library into your own frontend. You may import
+  any of the components developed.
+-->
+<script setup lang="ts">
+import { Demo } from './dist/index.mjs'
+</script>
+
+<template>
+  <Demo />
+</template>

package/stacks/tables/examples/vue/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stacks Vue Example</title>
+    <link rel="stylesheet" href="./dist/style.css">
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module">
+      import { createApp } from 'vue'
+      import App from './App.vue'
+
+      createApp(App).mount('#app')
+    </script>
+  </body>
+</html>

package/stacks/tables/examples/web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stacks Web Component Example</title>
+  </head>
+  <body>
+    <script type="module" src="./dist/index.mjs"></script>
+    <hello-world></hello-world>
+  </body>
+</html>

package/stacks/tables/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/stacks/tables/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@stacksjs/tables",
+  "version": "0.51.0",
+  "description": "The easy & modern way to work with tables. Facet filtering, searching, pagination, ...",
+  "author": "Open Web Labs",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stacksjs/tables.git"
+  },
+  "bugs": {
+    "url": "https://github.com/stacksjs/tables/issues"
+  },
+  "keywords": [
+    "tables",
+    "filters",
+    "pagination",
+    "sorting",
+    "search",
+    "component",
+    "library",
+    "vue",
+    "typescript",
+    "javascript"
+  ],
+  "contributors": [
+    "Chris Breuer <chris@ow3.org>"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "",
+    "preview": "vite preview",
+    "dev:components": "vite -c vite.config.ts"
+  },
+  "peerDependencies": {
+    "@stacksjs/search-engine": "workspace:*",
+    "@stacksjs/server": "workspace:*",
+    "@stacksjs/types": "workspace:*",
+    "@stacksjs/utils": "workspace:*",
+    "@vueform/multiselect": "^2.6.2",
+    "meilisearch": "^0.33.0"
+  },
+  "dependencies": {
+    "vite": "^4.3.9"
+  },
+  "devDependencies": {
+    "@stacksjs/development": "workspace:*"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,vue}": "eslint --fix"
+  },
+  "config": {
+    "commitizen": {
+      "path": ".stacks/node_modules/cz-git"
+    }
+  }
+}

package/stacks/tables/src/App.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Table from './components/Table.vue'
+</script>
+
+<template>
+  <div>
+    <Table />
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

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

@@ -0,0 +1,84 @@
+<!-- <script setup lang="ts">
+import { Table as TableV2 } from './main'
+
+const filterValues = {
+  website_access: [{
+    label: 'Yes',
+    value: 1,
+  }, {
+    label: 'No',
+    value: 0,
+  }],
+  disposition: [{
+    label: 'Active',
+    value: 'Active',
+  }, {
+    label: 'Released',
+    value: 'Released',
+  },
+  {
+    label: 'Terminated',
+    value: 'Terminated',
+  }],
+}
+
+  < template >
+  <div class="font-sans" >
+    <Suspense>
+    <TableSearch />
+    < /Suspense>
+
+    < Suspense >
+    <TableFilters : filter - values="filterValues" />
+      </Suspense>
+      < Suspense >
+      <TableV2
+        source="http://127.0.0.1:7700/"
+password = ""
+type = "users"
+columns = "
+id: ID,
+  first_name: First Name,
+    last_name: Last Name,
+      npn: NPN,
+        email: Email,
+          website_access: Website Access,
+            disposition: Disposition"
+sort = "id:desc"
+sorts = "id, email, npn"
+filters = ""
+actions = "Info"
+per - page="50"
+selectable = "true"
+  >
+  <template #id="id" >
+    <a
+            href="#"
+class="flex font-medium text-yellow-600"
+  >
+  {{ id.
+</script>value }}
+          </a>
+        </template>
+
+        <template #customer_name="customerName">
+          <a
+            href="#"
+            class="flex font-medium text-yellow-600"
+          >
+            {{ customerName.value }}
+          </a>
+        </template>
+<template #part_name="parts">
+  <a v-for="(part, index) in parts.value" :key="index" href="#" class="flex font-medium text-yellow-600">
+    {{ part }}
+  </a>
+</template>
+      </TableV2>
+    </Suspense>
+
+<Suspense>
+      <TablePagination />
+    </Suspense>
+  </div>
+</template> -->

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

@@ -0,0 +1,110 @@
+# Your Component Library
+
+This is where you create your components.
+
+> **Note**
+> If your project does not require any UI components, you can remove this folder. If your library does include components, you may use this readme as the boilerplate of your component library.
+
+## 💡 Get Started
+
+It's easy to get started. The only prerequisite is a basic understanding HTML, sprinkled with *minimal* JavaScript. In other words, there is virtually no learning curve.
+
+```bash
+# you may use this GitHub template or the following command:
+npx stacks new hello-world
+cd hello-world
+
+pnpm i # install deps for all packages
+pnpm dev # stubs the packages for local use
+pnpm dev:vite-vue # starts the dev server
+pnpm build # builds the packages for production-ready use
+```
+
+Additionally, the `package.json` contains some useful snippets you likely want to be aware of.
+
+## 🤖 Usage
+
+Because this project is optimized toward the development of easily reusable & composable component libraries, it's very easy to use (and distribute):
+
+```vue
+<script setup lang="ts">
+import HelloWorld from 'hello-world-stack'
+</script>
+
+<template>
+  <HelloWorld name="J Doe" />
+</template>
+```
+
+### Tips
+
+This project also includes a simple way to handle your versioning. Through semantic commit names, it will also generate the two changelogs: one as part of the GitHub releases & the one markdown file that's stored within the root of the project.
+
+```bash
+# how to create a git commit?
+git add . # select the changes you want to commit
+pnpm run commit # then simply follow the prompts
+
+# after you successfully committed, you may create a "release"
+pnpm run release # automates git commits, versioning, and CHANGELOG generation
+```
+
+Read more about these tips in the docs.
+
+### Dev Tools
+
+- [TypeScript 4.9](https://www.typescriptlang.org/)
+- [Vite 3.1](https://vitejs.dev/) - "Next Generation Frontend Tooling"
+- [Vue 3.2](https://vuejs.org/) - make easy use of Vue's powerful SFCs
+- [UnoCSS](https://github.com/unocss/unocss) - create your own style guide with ease (e.g. Tailwind CSS)
+- [Commitizen & git-cz](https://www.npmjs.com/package/git-cz) - Automate git commits, versioning, and CHANGELOG generation
+- [Vitest](https://github.com/vitest-dev/vitest) - Unit & E2E testing powered by Vite
+- [Renovate](https://renovatebot.com/) - automatic PR dependency updates
+- [GitHub Actions](https://github.com/features/actions) - automatically fixes code style issues, tags releases, and runs the test suite
+- [VS Code Extensions](./.vscode/extensions.json)
+  - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` IDE support
+  - [cspell](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - spell checking
+
+### Plugins
+
+- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
+- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
+- [VueUse](https://github.com/antfu/vueuse) - Collection of useful composition APIs
+- [Collect.js](https://github.com/ecrmnn/collect.js) - Easily work with object via Laravel-like collections
+
+### Coding Style
+
+- Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
+- [ESLint](https://eslint.org/) - statically analyzes, fixes and formats your code without the need for Prettier
+
+When using this template, feel free to adjust it to your needs. It is a framework to help you quickly & efficiently bootstrap & design component libraries using industry best practices.
+
+## 🧪 Testing
+
+```bash
+pnpm test
+```
+
+## 📈 Changelog
+
+Please see our [releases](https://github.com/stacksjs/vue-components-library-starter/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.ow3.org)
+
+## 📄 License
+
+The MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/stacks/tree/main/LICENSE.md) for more information.
+
+Made with ❤️