Merge pull request '#7405 vueDocs' (!1284) from 7405-vueDocs into dev
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
Reviewed-on: #1284 Reviewed-by: Javi Gallego <jgallego@verdnatura.es> Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
This commit is contained in:
commit
ae0f08b2c6
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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' }],
|
||||
},
|
||||
});
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
|
@ -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
|
||||
---
|
||||
142
package.json
142
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"
|
||||
}
|
||||
}
|
||||
772
pnpm-lock.yaml
772
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue