Merge pull request #516 from YunoHost/vue-2.7

Update to Vue 2.7
This commit is contained in:
Alexandre Aubin 2023-04-04 13:05:58 +02:00 committed by GitHub
commit 72e63da73a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 5032 additions and 8538 deletions

40
app/.eslintrc.js Normal file
View file

@ -0,0 +1,40 @@
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/strongly-recommended',
'eslint:recommended',
'standard'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'vue/max-attributes-per-line': [
'error',
{
singleline: 3,
multiline: 3
}
],
'vue/multi-word-component-names': 'off', // FIXME this should be adressed at some point
'no-console': 'warn',
'template-curly-spacing': 'off',
camelcase: 'warn',
indent: 'off',
'no-irregular-whitespace': 'off',
'no-unused-vars': [
'warn',
{ varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }
],
quotes: 'warn',
'no-multiple-empty-lines': [
'error',
{
max: 2
}
]
}
}

13207
app/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -12,78 +12,38 @@
"i18n:en": "./node_modules/@vue/cli-service/bin/vue-cli-service.js i18n:report --src './src/**/*.?(js|vue)' --locales './src/i18n/locales/en.json'"
},
"dependencies": {
"bootstrap-vue": "^2.21.2",
"core-js": "^3.9.1",
"date-fns": "^2.19.0",
"firacode": "^5.2.0",
"fontsource-firago": "^3.1.5",
"fork-awesome": "^1.1.7",
"simple-evaluate": "^1.4.3",
"vue": "^2.6.12",
"vue-i18n": "^8.24.1",
"vue-router": "^3.5.1",
"vuelidate": "^0.7.6",
"@fontsource/fira-code": "^4.5.13",
"@fontsource/firago": "^4.5.3",
"bootstrap-vue": "^2.22.0",
"core-js": "^3.29.1",
"date-fns": "^2.29.3",
"fork-awesome": "^1.2.0",
"simple-evaluate": "^1.4.6",
"vue": "^2.7.14",
"vue-i18n": "^8.28.2",
"vue-router": "^3.6.5",
"vue-showdown": "^2.4.1",
"vuelidate": "^0.7.7",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-plugin-router": "^4.5.13",
"@vue/cli-plugin-vuex": "^4.5.13",
"@vue/cli-service": "^4.5.13",
"babel-eslint": "^10.1.0",
"@babel/eslint-parser": "^7.21.3",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-plugin-router": "^5.0.8",
"@vue/cli-plugin-vuex": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"bootstrap": "^4.6.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"eslint": "^8.36.0",
"eslint-plugin-vue": "^9.10.0",
"popper.js": "^1.16.0",
"portal-vue": "^2.1.6",
"sass": "^1.32.8",
"sass-loader": "^8.0.0",
"sass-resources-loader": "^2.1.1",
"standard": "^14.3.4",
"vue-cli-plugin-bootstrap-vue": "~0.6.0",
"vue-cli-plugin-i18n": "~1.0.1",
"vue-template-compiler": "^2.6.12"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/strongly-recommended",
"eslint:recommended",
"standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"vue/max-attributes-per-line": [
"error",
{
"singleline": 3,
"multiline": {
"max": 3,
"allowFirstLine": true
}
}
],
"no-console": "warn",
"template-curly-spacing": "off",
"camelcase": "warn",
"indent": "off",
"no-irregular-whitespace": "off",
"no-unused-vars": "warn",
"quotes": "warn",
"no-multiple-empty-lines": [
"error",
{
"max": 2
}
]
}
"portal-vue": "^2.1.7",
"sass": "^1.60.0",
"sass-loader": "^13.2.1",
"sass-resources-loader": "^2.2.5",
"standard": "^17.0.0",
"vue-cli-plugin-bootstrap-vue": "^0.8.2",
"vue-cli-plugin-i18n": "^2.3.1"
},
"browserslist": [
"> 1%",

View file

@ -70,8 +70,9 @@
<b-nav-text
v-if="yunohost" id="yunohost-version" class="ml-md-auto text-center"
v-html="$t('footer_version', yunohost)"
/>
>
<span v-html="$t('footer_version', yunohost)" />
</b-nav-text>
</b-nav>
</nav>
</footer>

View file

@ -1,10 +1,13 @@
<template>
<b-input-group v-bind="$attrs">
<input-item
:id="id" :placeholder="placeholder"
:state="state" :aria-describedby="id + 'local-part-desc'"
v-model="value.localPart"
v-on="listeners"
:id="id"
:value="value.localPart"
:placeholder="placeholder"
:state="state"
:aria-describedby="id + 'local-part-desc'"
@input="onInput('localPart', $event)"
@blur="$parent.$emit('touch')"
/>
<b-input-group-append>
@ -13,9 +16,11 @@
<b-input-group-append>
<select-item
v-model="value.domain"
:value="value.domain"
:choices="choices"
:aria-describedby="id + 'domain-desc'"
@input="onInput('domain', $event)"
@blur="$parent.$emit('touch')"
/>
</b-input-group-append>
@ -40,24 +45,12 @@ export default {
type: { type: String, default: 'email' }
},
computed: {
listeners: function () {
return Object.assign({},
// Forwards all parent events listeners
this.$listeners,
// Overwrite input behavior so this component can work with v-model
{
input: (event) => {
this.$parent.$emit('touch')
this.$emit('input', this.value)
},
blur: event => {
this.$parent.$emit('touch')
this.$emit('blur', this.value)
}
}
)
methods: {
onInput (key, value) {
this.$emit('input', {
...this.value,
[key]: value
})
}
}
}

View file

@ -24,11 +24,14 @@
</b-card-title>
<template v-for="(field, fname) in section.fields">
<!-- FIXME rework the whole component chain to avoid direct mutation of the `forms` props -->
<!-- eslint-disable -->
<component
v-if="field.visible" :is="field.is" v-bind="field.props"
v-model="forms[panel.id][fname]" :validation="validation[fname]" :key="fname"
@action.stop="onAction(section.id, fname, section.fields)"
/>
<!-- eslint-enable -->
</template>
</component>
</template>

View file

@ -6,9 +6,15 @@
v-bind="{ panels, forms, v: $v, ...$attrs }"
v-on="$listeners"
>
<slot name="tab-top" slot="tab-top" />
<slot name="tab-before" slot="tab-before" />
<slot name="tab-after" slot="tab-after" />
<template #tab-top>
<slot name="tab-top" />
</template>
<template #tab-before>
<slot name="tab-before" />
</template>
<template #tab-after>
<slot name="tab-after" />
</template>
</routable-tabs>
<card v-else :title="routes_[0].text" :icon="routes_[0].icon">

View file

@ -14,9 +14,15 @@
<!-- Bind extra props to the child view and forward child events to parent -->
<router-view v-bind="$attrs" v-on="$listeners">
<slot name="tab-top" slot="tab-top"></slot>
<slot name="tab-before" slot="tab-before"></slot>
<slot name="tab-after" slot="tab-after"></slot>
<template #tab-top>
<slot name="tab-top" />
</template>
<template #tab-before>
<slot name="tab-before" />
</template>
<template #tab-after>
<slot name="tab-after" />
</template>
</router-view>
</b-card>
</template>

View file

@ -13,8 +13,9 @@
<b-alert
v-if="errorFeedback"
variant="danger" class="my-3" icon="ban"
v-html="errorFeedback"
/>
>
<div v-html="errorFeedback" />
</b-alert>
</slot>
</b-form>
</b-card-body>

View file

@ -30,11 +30,13 @@
<slot name="default" />
</b-card-body>
</b-collapse>
<slot v-else name="default" slot="default" />
<template v-else>
<slot name="default" />
</template>
<slot name="footer" slot="footer">
<template #footer v-if="'buttons' in $slots">
<slot name="buttons" />
</slot>
</template>
</b-card>
</template>

View file

@ -12,22 +12,25 @@
<slot name="server-error">
<b-alert
variant="danger" class="my-3" icon="ban"
:show="errorFeedback !== ''" v-html="errorFeedback"
/>
:show="errorFeedback !== ''"
>
<div v-html="errorFeedback" />
</b-alert>
</slot>
</b-form>
</template>
<slot v-if="!noFooter" name="buttons" slot="buttons">
<template v-if="!noFooter" #buttons>
<slot name="buttons">
<b-button type="submit" variant="success" :form="id">
{{ submitText ? submitText : $t('save') }}
</b-button>
</slot>
</template>
</card>
</template>
<script>
export default {
name: 'CardForm',

View file

@ -4,8 +4,10 @@
{{ label }}
</b-col>
<b-col>
<!-- FIXME not sure about rendering html -->
<b-col v-html="text" />
<div v-html="text" />
</b-col>
</b-row>
</template>

View file

@ -1,8 +1,12 @@
<template>
<div>
<top-bar v-if="hasTopBar">
<slot name="top-bar-group-left" slot="group-left" />
<slot name="top-bar-group-right" slot="group-right" />
<template #group-left>
<slot name="top-bar-group-left" />
</template>
<template #group-right>
<slot name="top-bar-group-right" />
</template>
</top-bar>
<slot v-else name="top-bar" />

View file

@ -1,6 +1,8 @@
<template>
<view-base v-bind="$attrs" v-on="$listeners" :skeleton="skeleton">
<slot v-if="hasCustomTopBar" name="top-bar" slot="top-bar" />
<template v-if="hasCustomTopBar" #top-bar>
<slot name="top-bar" />
</template>
<template v-if="!hasCustomTopBar" #top-bar-group-left>
<b-input-group class="w-100">
<b-input-group-prepend is-text>
@ -15,9 +17,13 @@
/>
</b-input-group>
</template>
<slot v-if="!hasCustomTopBar" name="top-bar-buttons" slot="top-bar-group-right" />
<template v-if="!hasCustomTopBar" #top-bar-group-right>
<slot name="top-bar-buttons" />
</template>
<slot name="top" slot="top" />
<template #top>
<slot name="top" />
</template>
<template #default>
<b-alert v-if="items === null || filteredItems === null" variant="warning">
@ -30,9 +36,13 @@
<slot v-else name="default" />
</template>
<slot name="bot" slot="bot" />
<template #bot>
<slot name="bot" />
</template>
<slot name="skeleton" slot="skeleton" />
<template #skeleton>
<slot name="skeleton" />
</template>
</view-base>
</template>

View file

@ -5,7 +5,7 @@
:value="value" :id="id"
size="lg" class="p-0 border-0" no-outer-focus
>
<template v-slot="{ tags, disabled, addTag, removeTag }">
<template #default="{ tags, disabled, addTag, removeTag }">
<ul v-if="!noTags && tags.length > 0" class="list-inline d-inline-block mb-2">
<li v-for="tag in tags" :key="id + '-' + tag" class="list-inline-item">
<b-form-tag

View file

@ -91,7 +91,7 @@ export function evaluateExpression (expression, forms) {
}, {})
// Allow to use match(var,regexp) function
const matchRe = new RegExp('match\\(\\s*(\\w+)\\s*,\\s*"([^"]+)"\\s*\\)', 'g')
const matchRe = /match(\s*(\w+)\s*,\s*"([^"]+)"\s*)/g
for (const matched of expression.matchAll(matchRe)) {
const [fullMatch, varMatch, regExpMatch] = matched
const varName = varMatch + '__re' + matched.index
@ -171,7 +171,7 @@ export function formatYunoHostArgument (arg) {
if (!isNaN(parseInt(arg.max))) {
validation.maxValue = validators.maxValue(parseInt(arg.max))
}
validation.numValue = validators.helpers.regex('Please provide an integer', new RegExp('^-?[0-9]+$'))
validation.numValue = validators.integer
}
},
{

View file

@ -1,3 +1,5 @@
@use 'sass:math';
// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a
// Those functions overrides built-in bootstrap's computation color functions (that
// generate flat variants and its darken/lighten alterations) to allow `var(--color)` CSS
@ -116,7 +118,9 @@
}
@function render-hsla($h, $s, $l, $a: 1) {
@return hsla($h, $s, $l, $a);
// @return hsla($h, #{$s}, #{$l}, $a);
// Error when using sass `hsla` with css variables, fallback to browser native `hsla`
@return unquote('hsla(#{$h}, #{$s}, #{$l}, #{$a})');
}
@function lighten($color, $amount) {
@ -208,7 +212,7 @@
$c: to-hsl($color);
$l: map-get($c, l);
$th: $yiq-contrasted-threshold / 2.56; // convert hex to dec
$th: calc($yiq-contrasted-threshold / 2.56); // convert hex to dec
$lightness: calc(-100 * calc(#{$l} - calc(#{$th} * 1%)));
// ignoring hue and saturation, just a light or dark gray
@ -224,7 +228,7 @@
@return $color;
}
$amount: $theme-color-interval * abs($level) / 100%;
$amount: math.div($theme-color-interval * abs($level) , 100%);
$c: to-hsl($color);
$h: map-get($c, h);
$s: map-get($c, s);

View file

@ -11,8 +11,8 @@
font-family: 'FiraGO';
src:
local('FiraGO ExtraLight Italic'),
url('~fontsource-firago/files/firago-all-200-italic.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-200-italic.woff') format('woff');
url('~@fontsource/firago/files/firago-all-200-italic.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-200-italic.woff') format('woff');
font-weight: 200;
font-style: italic;
font-display: swap;
@ -22,8 +22,8 @@
font-family: 'FiraGO';
src:
local('FiraGO ExtraLight'),
url('~fontsource-firago/files/firago-all-200-normal.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-200-normal.woff') format('woff');
url('~@fontsource/firago/files/firago-all-200-normal.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-200-normal.woff') format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
@ -33,8 +33,8 @@
font-family: 'FiraGO';
src:
local('FiraGO Italic'),
url('~fontsource-firago/files/firago-all-400-italic.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-400-italic.woff') format('woff');
url('~@fontsource/firago/files/firago-all-400-italic.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-400-italic.woff') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
@ -44,8 +44,8 @@
font-family: 'FiraGO';
src:
local('FiraGO Regular'),
url('~fontsource-firago/files/firago-all-400-normal.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-400-normal.woff') format('woff');
url('~@fontsource/firago/files/firago-all-400-normal.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-400-normal.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
@ -55,8 +55,8 @@
font-family: 'FiraGO';
src:
local('FiraGO Medium Italic'),
url('~fontsource-firago/files/firago-all-500-italic.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-500-italic.woff') format('woff');
url('~@fontsource/firago/files/firago-all-500-italic.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-500-italic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
@ -66,8 +66,8 @@
font-family: 'FiraGO';
src:
local('FiraGO Medium'),
url('~fontsource-firago/files/firago-all-500-normal.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-500-normal.woff') format('woff');
url('~@fontsource/firago/files/firago-all-500-normal.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-500-normal.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
@ -77,8 +77,8 @@
font-family: 'FiraGO';
src:
local('FiraGO Bold Italic'),
url('~fontsource-firago/files/firago-all-700-italic.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-700-italic.woff') format('woff');
url('~@fontsource/firago/files/firago-all-700-italic.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-700-italic.woff') format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
@ -88,8 +88,8 @@
font-family: 'FiraGO';
src:
local('FiraGO Bold'),
url('~fontsource-firago/files/firago-all-700-normal.woff2') format('woff2'),
url('~fontsource-firago/files/firago-all-700-normal.woff') format('woff');
url('~@fontsource/firago/files/firago-all-700-normal.woff2') format('woff2'),
url('~@fontsource/firago/files/firago-all-700-normal.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
@ -107,8 +107,8 @@
font-family: 'Fira Code';
src:
local('Fira Code Regular'),
url('~firacode/distr/woff2/FiraCode-Regular.woff2') format('woff2'),
url('~firacode/distr/woff/FiraCode-Regular.woff') format('woff');
// url('~@fontsource/fira-code/files/fira-code-all-400-normal.woff2') format('woff2'),
url('~@fontsource/fira-code/files/fira-code-all-400-normal.woff') format('woff');
font-weight: 400;
font-style: normal;
}

View file

@ -16,7 +16,7 @@ export default {
theme: localStorage.getItem('theme') === 'true',
experimental: localStorage.getItem('experimental') === 'true',
spinner: 'pacman',
supportedLocales: supportedLocales
supportedLocales
},
mutations: {

View file

@ -4,7 +4,9 @@
:validation="$v" :server-error="serverError"
@submit.prevent="onSubmit"
>
<slot name="disclaimer" slot="disclaimer" />
<template #disclaimer>
<slot name="disclaimer" />
</template>
<b-form-radio
v-model="selected" name="domain-type" value="domain"

View file

@ -21,7 +21,9 @@
<p>
<strong v-t="'api_error.error_message'" />
<b-alert class="mt-2" variant="danger" v-html="error.message" />
<b-alert class="mt-2" variant="danger">
<div v-html="error.message" />
</b-alert>
</p>
<template v-if="error.traceback">

View file

@ -6,7 +6,7 @@
>
<slot name="default" />
<template v-slot:overlay>
<template #overlay>
<b-card no-body class="card-overlay">
<b-card-header header-bg-variant="white">
<query-header :request="error || currentRequest" status-size="lg" />

View file

@ -1,7 +1,9 @@
<template>
<!-- This card receives style from `ViewLockOverlay` if used inside it -->
<div>
<b-card-body body-class="alert alert-warning" v-html="warning.text" />
<b-card-body body-class="alert alert-warning">
<div v-html="warning.text" />
</b-card-body>
<b-card-footer footer-bg-variant="warning">
<b-button

View file

@ -396,13 +396,15 @@ export default {
? app.from_catalog.potential_alternative_to.join(this.$i18n.t('words.separator'))
: null,
description: DESCRIPTION ? formatI18nField(DESCRIPTION) : app.description,
integration: app.manifest.packaging_format >= 2 ? {
integration: app.manifest.packaging_format >= 2
? {
archs: Array.isArray(archs) ? archs.join(this.$i18n.t('words.separator')) : archs,
ldap: ldap === 'not_relevant' ? null : ldap,
sso: sso === 'not_relevant' ? null : sso,
multi_instance,
resources: { ram: ram.runtime, disk }
} : null,
}
: null,
links: [
['license', `https://spdx.org/licenses/${app.manifest.upstream.license}`],
...['website', 'admindoc', 'userdoc', 'code'].map((key) => ([key, app.manifest.upstream[key]])),
@ -411,9 +413,11 @@ export default {
doc: {
notifications: {
postInstall: notifs.POST_INSTALL && notifs.POST_INSTALL.main ? [['main', formatI18nField(notifs.POST_INSTALL.main)]] : [],
postUpgrade: notifs.POST_UPGRADE ? Object.entries(notifs.POST_UPGRADE).map(([key, content]) => {
postUpgrade: notifs.POST_UPGRADE
? Object.entries(notifs.POST_UPGRADE).map(([key, content]) => {
return [key, formatI18nField(content)]
}) : []
})
: []
},
admin: [
['admin', formatI18nField(ADMIN)],

View file

@ -254,13 +254,15 @@ export default {
demo: _app.upstream.demo,
version,
license: _app.upstream.license,
integration: _app.packaging_format >= 2 ? {
integration: _app.packaging_format >= 2
? {
archs: Array.isArray(archs) ? archs.join(this.$i18n.t('words.separator')) : archs,
ldap: ldap === 'not_relevant' ? null : ldap,
sso: sso === 'not_relevant' ? null : sso,
multi_instance,
resources: { ram: ram.runtime, disk }
} : null,
}
: null,
links: [
['license', `https://spdx.org/licenses/${_app.upstream.license}`],
...['website', 'admindoc', 'userdoc', 'code'].map((key) => ([key, _app.upstream[key]])),

View file

@ -16,7 +16,7 @@
<b-list-group>
<b-list-group-item
v-for="{ id, name, description, label } in filteredApps" :key="id"
v-for="{ id, description, label } in filteredApps" :key="id"
:to="{ name: 'app-info', params: { id }}"
class="d-flex justify-content-between align-items-center pr-0"
>

View file

@ -84,7 +84,7 @@ export default {
if (!confirmed) return
}
var requestArgs = {}
const requestArgs = {}
Object.assign(requestArgs, this.form)
if (!requestArgs.delete) delete requestArgs.delete
if (!requestArgs.update) delete requestArgs.update

View file

@ -61,15 +61,16 @@ module.exports = {
css: {
loaderOptions: {
sass: {
prependData: '@import "@/scss/_variables.scss";'
additionalData: '@import "@/scss/_variables.scss";'
}
}
},
publicPath: '/yunohost/admin',
devServer: process.env.NODE_ENV === 'development' ? {
devServer: process.env.NODE_ENV === 'development'
? {
public: fs.readFileSync('/etc/yunohost/current_host', 'utf8'),
https: false,
disableHostCheck: true,
allowedHosts: 'all',
proxy: {
'^/yunohost': {
target: `http://${process.env.VUE_APP_IP}`,
@ -77,10 +78,13 @@ module.exports = {
logLevel: 'info'
}
},
watchOptions: {
static: {
watch: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
}
} : {}
}
}
: {}
}