.gitignore

@@ -31,3 +31,7 @@ yarn-error.log*
 # Cypress directories and files
 /test/cypress/videos
 /test/cypress/screenshots
+
+# VitePress directories and files
+/docs/.vitepress/cache
+/docs/.vuepress

docs/.vitepress/config.js

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: 'Lilium',
+    description: 'Lilium docs',
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            { text: 'Home', link: '/' },
+            { text: 'Components', link: '/components/vnInput' },
+            { text: 'Composables', link: '/composables/useArrayData' },
+        ],
+
+        sidebar: [
+            {
+                items: [
+                    {
+                        text: 'Components',
+                        collapsible: true,
+                        collapsed: true,
+                        items: [{ text: 'VnInput', link: '/components/vnInput' }],
+                    },
+                    {
+                        text: 'Composables',
+                        collapsible: true,
+                        collapsed: true,
+                        items: [
+                            { text: 'useArrayData', link: '/composables/useArrayData' },
+                        ],
+                    },
+                ],
+            },
+        ],
+
+        socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }],
+    },
+});

docs/components/vnInput.md

@@ -0,0 +1,136 @@
+# VnInput
+
+`VnInput` is a custom input component that provides various useful features such as validation, input clearing, and more.
+
+## Props
+
+### `modelValue`
+
+- **Type:** `String | Number`
+- **Default:** `null`
+- **Description:** The value of the model bound to the component.
+
+### `isOutlined`
+
+- **Type:** `Boolean`
+- **Default:** `false`
+- **Description:** If `true`, the component is rendered with an outlined style.
+
+### `info`
+
+- **Type:** `String`
+- **Default:** `''`
+- **Description:** Additional information displayed alongside the component.
+
+### `clearable`
+
+- **Type:** `Boolean`
+- **Default:** `true`
+- **Description:** If `true`, the component shows a button to clear the input.
+
+### `emptyToNull`
+
+- **Type:** `Boolean`
+- **Default:** `true`
+- **Description:** If `true`, converts empty inputs to `null`.
+
+### `insertable`
+
+- **Type:** `Boolean`
+- **Default:** `false`
+- **Description:** If `true`, allows the insertion of new values.
+
+### `maxlength`
+
+- **Type:** `Number`
+- **Default:** `null`
+- **Description:** The maximum number of characters allowed in the input.
+
+### `uppercase`
+
+- **Type:** `Boolean`
+- **Default:** `false`
+- **Description:** If `true`, converts the input text to uppercase.
+
+## Emits
+
+### `update:modelValue`
+
+- **Description:** Emits the updated model value.
+- **Behavior:** This event is emitted whenever the input value changes. It is used to update the model value bound to the component.
+
+### `update:options`
+
+- **Description:** Emits the updated options.
+- **Behavior:** This event is emitted when the component's options change. It is useful for components with dynamic options.
+
+### `keyup.enter`
+
+- **Description:** Emits an event when the Enter key is pressed.
+- **Behavior:** This event is emitted whenever the Enter key is pressed while the input is focused. It can be used to handle specific actions when the input is confirmed.
+
+### `remove`
+
+- **Description:** Emits an event to remove the current value.
+- **Behavior:** This event is emitted when the clear button (close icon) is clicked. It is used to handle the removal of the current input value.
+
+## Functions
+
+### `focus`
+
+- **Description:** Focuses the input.
+- **Behavior:** This function is exposed so it can be called from outside the component. It uses `vnInputRef.value.focus()` to focus the input.
+
+### `handleKeydown`
+
+- **Description:** Handles the `keydown` event of the input.
+- **Behavior:** This function is called whenever a key is pressed while the input is focused. If the pressed key is `Backspace`, it does nothing. If `insertable` is `true` and the pressed key is a number, it calls `handleInsertMode`.
+
+### `handleInsertMode`
+
+- **Description:** Handles the insertion mode of values.
+- **Behavior:** This function is called when `insertable` is `true` and a numeric key is pressed. It inserts the value at the cursor position and updates the input value. Then, it moves the cursor to the correct position.
+
+### `handleUppercase`
+
+- **Description:** Converts the input value to uppercase.
+- **Behavior:** This function is called when the uppercase icon is clicked. It converts the current input value to uppercase.
+
+## Usage
+
+```vue
+<template>
+    <VnInput
+        v-model="inputValue"
+        :isOutlined="true"
+        info="Additional information"
+        :clearable="true"
+        :emptyToNull="true"
+        :insertable="false"
+        :maxlength="50"
+        :uppercase="true"
+        @update:modelValue="handleUpdate"
+        @keyup.enter="handleEnter"
+        @remove="handleRemove"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const inputValue = ref('');
+
+const handleUpdate = (value) => {
+    console.log('Updated value:', value);
+};
+
+const handleEnter = () => {
+    console.log('Enter pressed');
+};
+
+const handleRemove = () => {
+    console.log('Value removed');
+};
+</script>
+```

docs/composables/useArrayData.md

@@ -0,0 +1,215 @@
+# useArrayData
+
+`useArrayData` is a composable function that provides a set of utilities for managing array data in a Vue component. It leverages Pinia for state management and provides various methods for fetching, filtering, and manipulating data.
+
+## Usage
+
+```javascript
+import { useArrayData } from 'src/composables/useArrayData';
+
+const {
+    fetch,
+    applyFilter,
+    addFilter,
+    getCurrentFilter,
+    setCurrentFilter,
+    addFilterWhere,
+    addOrder,
+    deleteOrder,
+    refresh,
+    destroy,
+    loadMore,
+    store,
+    totalRows,
+    updateStateParams,
+    isLoading,
+    deleteOption,
+    reset,
+    resetPagination,
+} = useArrayData('myKey', userOptions);
+```
+
+## Parameters
+
+### `key`
+
+- **Type:** `String`
+- **Description:** A unique key to identify the data store.
+
+### `userOptions`
+
+- **Type:** `Object`
+- **Description:** An object containing user-defined options for configuring the data store.
+
+## Methods
+
+### `fetch`
+
+Fetches data from the server.
+
+#### Parameters
+
+- **`options`** : An object with the following properties:
+- `append` (Boolean): Whether to append the fetched data to the existing data.
+- `updateRouter` (Boolean): Whether to update the router with the current filter.
+
+#### Returns
+
+- **`Promise`** : A promise that resolves with the fetched data.
+
+### `applyFilter`
+
+Applies a filter to the data.
+
+#### Parameters
+
+- **`filter`** : An object containing the filter criteria.
+- **`params`** : Additional parameters for the filter.
+- **`fetchOptions`** : Options for the fetch method.
+
+#### Returns
+
+- **`Promise`** : A promise that resolves with the filtered data.
+
+### `addFilter`
+
+Adds a filter to the existing filters.
+
+#### Parameters
+
+- **`filter`** : An object containing the filter criteria.
+- **`params`** : Additional parameters for the filter.
+
+#### Returns
+
+- **`Promise`** : A promise that resolves with the updated filter and parameters.
+
+### `getCurrentFilter`
+
+Gets the current filter applied to the data.
+
+#### Returns
+
+- **`Object`** : The current filter and parameters.
+
+### `setCurrentFilter`
+
+Sets the current filter for the data.
+
+#### Returns
+
+- **`Object`** : The current filter and parameters.
+
+### `addFilterWhere`
+
+Adds a `where` clause to the existing filters.
+
+#### Parameters
+
+- **`where`** : An object containing the `where` clause.
+
+#### Returns
+
+- **`Promise`** : A promise that resolves when the filter is applied.
+
+### `addOrder`
+
+Adds an order to the existing orders.
+
+#### Parameters
+
+- **`field`** : The field to order by.
+- **`direction`** : The direction of the order (`ASC` or `DESC`).
+
+#### Returns
+
+- **`Promise`** : A promise that resolves with the updated order.
+
+### `deleteOrder`
+
+Deletes an order from the existing orders.
+
+#### Parameters
+
+- **`field`** : The field to delete the order for.
+
+#### Returns
+
+- **`Promise`** : A promise that resolves when the order is deleted.
+
+### `refresh`
+
+Refreshes the data by re-fetching it from the server.
+
+#### Returns
+
+- **`Promise`** : A promise that resolves with the refreshed data.
+
+### `destroy`
+
+Destroys the data store for the given key.
+
+### `loadMore`
+
+Loads more data by incrementing the pagination.
+
+#### Returns
+
+- **`Promise`** : A promise that resolves with the additional data.
+
+### `updateStateParams`
+
+Updates the state parameters with the given data.
+
+#### Parameters
+
+- **`data`** : The data to update the state parameters with.
+
+### `deleteOption`
+
+Deletes an option from the store.
+
+#### Parameters
+
+- **`option`** : The option to delete.
+
+### `reset`
+
+Resets the store to its default state.
+
+#### Parameters
+
+- **`opts`** : An array of options to reset.
+
+### `resetPagination`
+
+Resets the pagination for the store.
+
+## Computed Properties
+
+### `totalRows`
+
+- **Description:** The total number of rows in the data.
+- **Type:** `Number`
+
+### `isLoading`
+
+- **Description:** Whether the data is currently being loaded.
+- **Type:** `Boolean`
+
+```vue
+<script setup>
+import { useArrayData } from 'src/composables/useArrayData';
+
+const userOptions = {
+    url: '/api/data',
+    limit: 10,
+};
+
+const arrayData = useArrayData('myKey', userOptions);
+</script>
+```
+
+```
+
+```

docs/index.md

@@ -0,0 +1,13 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+    name: 'Lilium'
+    text: 'Lilium docs'
+    tagline: Powered by Verdnatura
+    actions:
+        - theme: brand
+          text: Docs
+          link: /components/vnInput
+---

package.json

@@ -1,70 +1,74 @@
 {
-    "name": "salix-front",
-    "version": "25.06.0",
-    "description": "Salix frontend",
-    "productName": "Salix",
-    "author": "Verdnatura",
-    "private": true,
-    "packageManager": "pnpm@8.15.1",
-    "type": "module",
-    "scripts": {
-        "resetDatabase": "cd ../salix && gulp docker",
-        "lint": "eslint --ext .js,.vue ./",
-        "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
-        "test:e2e": "cypress open",
-        "test:e2e:ci": "npm run resetDatabase && cd ../salix-front && cypress run",
-        "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
-        "test:unit": "vitest",
-        "test:unit:ci": "vitest run",
-        "commitlint": "commitlint --edit",
-        "prepare": "npx husky install",
-        "addReferenceTag": "node .husky/addReferenceTag.js"
-    },
-    "dependencies": {
-        "@quasar/cli": "^2.4.1",
-        "@quasar/extras": "^1.16.16",
-        "axios": "^1.4.0",
-        "chromium": "^3.0.3",
-        "croppie": "^2.6.5",
-        "moment": "^2.30.1",
-        "pinia": "^2.1.3",
-        "quasar": "^2.17.7",
-        "validator": "^13.9.0",
-        "vue": "^3.5.13",
-        "vue-i18n": "^9.3.0",
-        "vue-router": "^4.2.5"
-    },
-    "devDependencies": {
-        "@commitlint/cli": "^19.2.1",
-        "@commitlint/config-conventional": "^19.1.0",
-        "@intlify/unplugin-vue-i18n": "^0.8.2",
-        "@pinia/testing": "^0.1.2",
-        "@quasar/app-vite": "^2.0.8",
-        "@quasar/quasar-app-extension-qcalendar": "^4.0.2",
-        "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
-        "@vue/test-utils": "^2.4.4",
-        "autoprefixer": "^10.4.14",
-        "cypress": "^13.6.6",
-        "cypress-mochawesome-reporter": "^3.8.2",
-        "eslint": "^9.18.0",
-        "eslint-config-prettier": "^10.0.1",
-        "eslint-plugin-cypress": "^4.1.0",
-        "eslint-plugin-vue": "^9.32.0",
-        "husky": "^8.0.0",
-        "postcss": "^8.4.23",
-        "prettier": "^3.4.2",
-        "sass": "^1.83.4",
-        "vitest": "^0.34.0"
-    },
-    "engines": {
-        "node": "^20 || ^18 || ^16",
-        "npm": ">= 8.1.2",
-        "yarn": ">= 1.21.1",
-        "bun": ">= 1.0.25"
-    },
-    "overrides": {
-        "@vitejs/plugin-vue": "^5.2.1",
-        "vite": "^6.0.11",
-        "vitest": "^0.31.1"
-    }
-}
+  "name": "salix-front",
+  "version": "25.06.0",
+  "description": "Salix frontend",
+  "productName": "Salix",
+  "author": "Verdnatura",
+  "private": true,
+  "packageManager": "pnpm@8.15.1",
+  "type": "module",
+  "scripts": {
+    "resetDatabase": "cd ../salix && gulp docker",
+    "lint": "eslint --ext .js,.vue ./",
+    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    "test:e2e": "cypress open",
+    "test:e2e:ci": "npm run resetDatabase && cd ../salix-front && cypress run",
+    "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
+    "test:unit": "vitest",
+    "test:unit:ci": "vitest run",
+    "commitlint": "commitlint --edit",
+    "prepare": "npx husky install",
+    "addReferenceTag": "node .husky/addReferenceTag.js",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "dependencies": {
+    "@quasar/cli": "^2.4.1",
+    "@quasar/extras": "^1.16.16",
+    "axios": "^1.4.0",
+    "chromium": "^3.0.3",
+    "croppie": "^2.6.5",
+    "moment": "^2.30.1",
+    "pinia": "^2.1.3",
+    "quasar": "^2.17.7",
+    "validator": "^13.9.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^9.3.0",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@intlify/unplugin-vue-i18n": "^0.8.2",
+    "@pinia/testing": "^0.1.2",
+    "@quasar/app-vite": "^2.0.8",
+    "@quasar/quasar-app-extension-qcalendar": "^4.0.2",
+    "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+    "@vue/test-utils": "^2.4.4",
+    "autoprefixer": "^10.4.14",
+    "cypress": "^13.6.6",
+    "cypress-mochawesome-reporter": "^3.8.2",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "husky": "^8.0.0",
+    "postcss": "^8.4.23",
+    "prettier": "^3.4.2",
+    "sass": "^1.83.4",
+    "vitepress": "^1.6.3",
+    "vitest": "^0.34.0"
+  },
+  "engines": {
+    "node": "^20 || ^18 || ^16",
+    "npm": ">= 8.1.2",
+    "yarn": ">= 1.21.1",
+    "bun": ">= 1.0.25"
+  },
+  "overrides": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.11",
+    "vitest": "^0.31.1"
+  }
+}