vx-vue 0.0.2 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Gregor Kofler
+
+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,7 +1,36 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+# vxVue
+
+## Introduction
+VxVue provides a handful of reusable Vue components styled with Tailwind CSS. All components are geared towards simplicity leaving room for customizations, extensions or adaptations. At some point a more verbose documentation than this brief readme might emerge.
+
+## Requirements
+* Vue.js 3.*
+* Tailwind CSS 3.*
+
+The official Tailwind CSS forms plugin is used to provide basic styling of the form components using the class strategy which allows the styling of non-form elements consistently.
+An easy to configure color theming is applied. Since Tailwind won't observe classes in imported components tailwind.config.js should contain
+```
+module.exports = {
+    content: [
+        './node_modules/vx-vue/**/*.js',
+        ...
+    ],
+    ...
+}
+```
+## Provided components
+So far the following components have been implemented:
+
+| element          | description                                                                                        |
+|------------------|----------------------------------------------------------------------------------------------------|
+| `password-input` | a simple input with toggle button which toggles between `type='button'` and `type='text'`          |
+| `form-select`    | a select element adapted for Vue.js integration                                                    |                                                                               
+| `form-switch`    | a fancy checkbox                                                                                   |       
+| `sortable`       | a sortable table; the `columns` attribute specifies the columns and their sorting options          |       
+| `message-toast`  | displays a notification which dismisses itself after a configurable timeout                        |      
+| `confirm`        | promise-based component which can either take one ("confirm") or two buttons ("confirm", "cancel") | 
+| `pagination`     | a pagination component for arbitrary items; opinionated in its layout                              |  
+| `tabs`           | a tabs component which allows both badges and icons                                                |
+| `simple-tree`    | a simple tree implemented with a recursive component                                               |
+| `date-input`     | input element for guided date inputs, also used by the datepicker                                  |
+| `datepicker`     | a bare bones datepicker component                                                                  |

package/dist/style.css

@@ -1 +1 @@
-.messagetoast-fade-enter-from,.messagetoast-fade-leave-to{@apply opacity-0 transform-gpu -translate-y-10;}.messagetoast-fade-enter-to,.messagetoast-fade-leave-from{@apply opacity-100 translate-y-0;}.messagetoast-fade-enter-active,.messagetoast-fade-leave-active{@apply transition-all duration-300;}tbody tr[data-v-c18eb3d8]:nth-of-type(odd){@apply bg-slate-100 text-slate-700;}tbody tr[data-v-c18eb3d8]:nth-of-type(2n){@apply bg-slate-200 text-slate-800;}tbody tr:nth-of-type(odd) td.active[data-v-c18eb3d8]{@apply bg-amber-100 text-amber-700;}tbody tr:nth-of-type(2n) td.active[data-v-c18eb3d8]{@apply bg-amber-200 text-amber-800;}thead th.active[data-v-c18eb3d8]{@apply bg-amber-800;}
+.messagetoast-fade-enter-from,.messagetoast-fade-leave-to{@apply opacity-0 transform-gpu -translate-y-10;}.messagetoast-fade-enter-to,.messagetoast-fade-leave-from{@apply opacity-100 translate-y-0;}.messagetoast-fade-enter-active,.messagetoast-fade-leave-active{@apply transition-all duration-300;}tbody tr[data-v-069dfce3]:nth-of-type(odd){@apply bg-slate-100 text-slate-700;}tbody tr[data-v-069dfce3]:nth-of-type(2n){@apply bg-slate-200 text-slate-800;}tbody tr:nth-of-type(odd) td.active[data-v-069dfce3]{@apply bg-amber-100 text-amber-700;}tbody tr:nth-of-type(2n) td.active[data-v-069dfce3]{@apply bg-amber-200 text-amber-800;}thead th.active[data-v-069dfce3]{@apply bg-amber-800;}