🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@fouro/melx

Package Overview
Dependencies
Maintainers
5
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fouro/melx - npm Package Compare versions

Comparing version
1.0.6
 to
1.0.7
+258
src/components/configSetting/Times.vue
<template>
<div class="content-wrapper">
<div class="setting-detail has-footer">
<div class="container-wrapper">
<div class="times-range config-container">
<el-form label-width="12rem" :rules="rules" ref="timeRuleForm" :model="values" :show-message="false" hide-required-asterisk @validate="propValidate">
<el-form-item class="el-form-item" prop="title" :label="$t('components.timesRange.name')">
<el-input name="title" v-model="values.title" size="medium" :placeholder="$t('components.timesRange.placeholder.name')">
</el-input>
</el-form-item>
<el-form-item class="el-form-item" prop="customDays" :label="$t('components.timesRange.week')">
<el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="handleAllCheckedChange" name="allchecked">{{$t('components.checkAll')}}</el-checkbox>
</el-form-item>
<el-form-item label-width="0" prop="customDays">
<el-checkbox-group name="customDays" v-model="values.customDays">
<el-checkbox class="checkbox-el" v-for="item in customDays" :key="item.key" :label="item.key" :name="`custom-day-${item.key}`">{{item.value}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item class="el-form-item time-form-item" prop="timeRange" :label="$t('components.timesRange.time')" :error="errors.timeRange">
<el-time-picker name="timeRange" is-range v-model="timeRange" :range-separator="$t('components.timesRange.to')" :start-placeholder="$t('components.timesRange.placeholder.start')" :end-placeholder="$t('components.timesRange.placeholder.end')" :clearable="false" :editable="false">
</el-time-picker>
</el-form-item>
<el-form-item class="el-form-item" prop="action" :label="$t('components.timesRange.way')" clearable>
<select-field name="action" class="wayRule" v-model="values.action" :placeholder="$t('components.timesRange.placeholder.way')">
<option-field name="allow-option-1" :label="$t('components.timesRange.allow')" value="ALLOW">
</option-field>
<option-field name="allow-option-2" :label="$t('components.timesRange.forbidden')" value="DENY">
</option-field>
</select-field>
</el-form-item>
</el-form>
</div>
</div>
<div class="backspace" @click.prevent.stop="close()">
<i class="el-icon-arrow-left"></i>
</div>
<error-msg :errors="errors"></error-msg>
<div class="setting-footer">
<el-button class="btn-submit" type="primary" @click.prevent.stop="submit">{{$t('components.buttons.submit')}}</el-button>
</div>
</div>
</div>
</template>
<script>
import selectField from '../fields/selectField'
import optionField from '../fields/optionField'
import errorMsg from "../errorMsg";
import formMixin from '@fouro/all-in-one/src/mixins/el-form.js'
export default {
name: 'AddTimeRule',
props: ['state'],
components: {
selectField,
optionField,
errorMsg
},
mixins: [formMixin],
data() {
return {
visible: true,
fieldIndex: {
title: 0,
customDays: 1,
timeRange: 2,
action: 3
},
values: {
title: null,
action: null,
dayType: 'CUSTOM',
timeRange: null,
customDays: []
},
customDays: [{
key: 2,
value: this.$t('components.weekdays.Monday')
}, {
key: 3,
value: this.$t('components.weekdays.Tuesday')
}, {
key: 4,
value: this.$t('components.weekdays.Wednesday')
}, {
key: 5,
value: this.$t('components.weekdays.Thursday')
}, {
key: 6,
value: this.$t('components.weekdays.Friday')
}, {
key: 7,
value: this.$t('components.weekdays.Saturday')
}, {
key: 1,
value: this.$t('components.weekdays.Sunday')
}],
rules: {
title: [
{ type: 'input', trigger: 'blur', message: this.$t('components.timesRange.message.error.specialCharacter') },
{ required: true, message: this.$t('components.timesRange.message.error.name'), trigger: 'blur' },
{ max: 64, message: this.$t('components.timesRange.addThroughRule.message.error.name.max'), trigger: 'blur' }
],
customDays: [{ required: true, message: this.$t('components.timesRange.message.error.customDays') }],
action: [{ required: true, message: this.$t('components.timesRange.message.error.action') }],
timeRange: [{ required: true, message: this.$t('components.timesRange.message.error.timeRange'), trigger: 'blur' }]
}
}
},
mounted() {
this.initialize();
},
beforeDestroy() {
this.$bus.$off('navigationclose', this.onClose)
this.$root.$el.removeChild(this.$el)
},
computed: {
isIndeterminate() {
let checkedCount = this.values.customDays && this.values.customDays.length;
return checkedCount > 0 && checkedCount < this.customDays.length;
},
allChecked: {
set(value) {
this.handleAllCheckedChange(value)
},
get() {
if (!this.values.customDays) return false;
return this.values.customDays && this.values.customDays.length == this.customDays.length
}
},
timeRange: {
get() {
if (!this.values.timeRange) return null;
var dayRange = this.values.timeRange,
start = dayRange.start,
end = dayRange.end;
var result = [];
result[0] = new Date(`1900/01/01 ${start.hour}:${start.minute}:${start.second}`)
result[1] = new Date(`1900/01/01 ${end.hour}:${end.minute}:${end.second}`)
return result;
},
set(value) {
if (!value) {
this.values.timeRange = null;
return;
}
var timeRange = value,
startTimeRange = new Date(timeRange[0]),
endTimeRange = new Date(timeRange[1]);
this.values.timeRange = {
start: {
hour: startTimeRange.getHours(),
minute: startTimeRange.getMinutes(),
second: startTimeRange.getSeconds()
},
end: {
hour: endTimeRange.getHours(),
minute: endTimeRange.getMinutes(),
second: endTimeRange.getSeconds()
}
};
}
}
},
methods: {
initialize() {
this.$root.$el.append(this.$el)
if (this.state.data) {
Object.assign(this.values, this.state.data);
}; //
this.$bus.$on('navigationclose', this.onClose)
},
handleAllCheckedChange(val) {
this.values.customDays = val ? this.customDays.map(item => item.key) : [];
},
onClose() {
this.$emit('close', false)
},
close(event) {
this.$emit('close', event)
this.$parent.broadcast(null);
},
submit() {
this.formValidate('timeRuleForm', valid => {
if (valid) {
this.close(this.values)
}
})
}
}
}
</script>
<style>
.times-range .el-form {
padding: 1.75rem;
}
.times-range .el-form-item {
border-bottom: 1px solid #e5e5e5;
line-height: 4.6rem;
margin: 0;
padding: 0;
}
.times-range .el-form-item__content {
line-height: 4.6rem;
font-size: 1.6rem;
text-align: right;
}
.times-range .el-form-item .el-form-item__label {
line-height: 4.6rem;
}
.times-range .el-form-item .el-input__inner {
border: none;
text-align: right;
height: 100%;
font-size: 1.6rem;
}
.times-range .el-date-editor .el-range-input,
.times-range .el-date-editor .el-range-separator {
font-size: 1.6rem;
}
.times-range .el-date-editor .el-range-separator {
width: 2rem;
}
.times-range .el-form-item__content>.el-checkbox {
text-align: right;
float: right;
padding-right: 0.6rem;
}
.times-range .el-form-item__content .el-checkbox-group {
text-align: left;
padding: 0 0 0 2rem;
margin: 0;
}
.times-range .el-form-item__content .el-checkbox-group .el-checkbox {
display: inline-block;
text-align: left;
margin-right: 2rem;
}
.times-range .el-date-editor--timerange.el-input__inner {
width: 16rem;
padding: 0;
margin-right: -1rem;
}
.times-range .el-date-editor .el-range__close-icon {
display: none;
}
</style> 
+156
src/components/configSetting/TimesRange.vue
<template>
<div class="times-section">
<div class="times-button">
<el-button @click="handleCreate" class="btn-addrange" :disabled="disabled">
<i class="el-icon-plus"></i>{{$t('components.timesRange.buttons.add')}}
</el-button>
</div>
<div class="times-result">
<el-form label-width="12rem">
<el-form-item v-for="(item,index) in data" :label="item.title">
<div class="select-field el-input el-input--suffix" @click.stop="handleEdit(index,item)"><a href="javascript:void(0)" @click.stop="handleRemove(index,item)"><i class="btn-danger el-icon-delete"></i></a>&nbsp;&nbsp;&nbsp;{{item.action === 'ALLOW'?$t('components.timesRange.allow'):$t('components.timesRange.forbidden')}}<span class="el-input__prefix"></span><span class="el-input__suffix"><span class="el-input__suffix-inner"><i class="el-icon-arrow-right"></i></span></span> </div>
</el-form-item>
</el-form>
</div>
<times v-if="dialog.visible" :state="dialog.state" @close="handleClose($event)">
</times>
</div>
</template>
<script type="text/javascript">
import times from './Times'
import Locale from "element-ui/src/mixins/locale";
export default {
name: 'timesrange',
mixins: [Locale],
props: {
value: { required: true },
disabled: {
type: Boolean,
default: false
}
},
components: {
times
},
computed: {
data: {
get() {
if (!this.value) return []
return JSON.parse(this.value)
},
set(value) {
this.emitChange(value)
}
}
},
data() {
return {
dialog: {
visible: false,
selectedIndex: null,
state: {
data: null,
title: null
}
}
}
},
mounted() {
},
beforeDestroy() {
},
methods: {
dayFormatter(row) {
let weekdays = [this.$t('common.weekdays.Sunday'), this.$t('common.weekdays.Monday'), this.$t('common.weekdays.Tuesday'), this.$t('common.weekdays.Wednesday'), this.$t('common.weekdays.Thursday'), this.$t('common.weekdays.Friday'), this.$t('common.weekdays.Saturday')]
let temp = []
row.customDays.forEach(item => {
temp.push(weekdays[parseInt(item) - 1])
})
return temp.join(',')
},
timeFormatter(row) {
let t = row.timeRange,
start = t.start,
end = t.end
return `${start.hour}:${fillZero(start.minute)}:${fillZero(start.second)} ${this.$t('common.rangeSeparator')} ${end.hour}:${fillZero(end.minute)}:${fillZero(end.second)}`
function fillZero(value) {
return ('00' + value).slice(-2);
}
},
actionFormatter(row) {
return row.action == 'ALLOW' ? this.$t('components.timesRange.allow') : this.$t('components.timesRange.forbidden')
},
handleCreate() {
this.dialog.visible = true;
this.dialog.state = {
title: null,
data: null
}
this.broadcast(this.$t('components.timesRange.title.create'))
},
handleRemove(index, row) {
this.data.splice(index, 1)
this.emitChange(this.data)
},
handleEdit(index, row) {
this.dialog.visible = true;
this.dialog.selectedIndex = index;
this.dialog.state = {
title: ' ',
data: JSON.parse(JSON.stringify(row))
}
this.broadcast(this.$t('components.timesRange.title.update'))
},
handleClose(event) {
this.dialog.visible = false
if (event) {
//if edit
let index = this.dialog.selectedIndex;
if (index !== null) {
this.data.splice(index, 1, event)
} else {
this.data.push(event)
}
this.emitChange(this.data)
}
this.dialog.selectedIndex = null;
this.broadcast(null)
},
emitChange(value) {
this.$emit('input', JSON.stringify(value))
},
broadcast(title) {
this.$bus.$emit('navigationChange', title)
}
}
}
</script>
<style type="text/css">
.times-button {
text-align: left;
border-bottom: 1px solid #e5e5e5;
padding: 0;
margin: 0;
}
.el-button.btn-addrange {
font-size: 1.7rem;
color: #66b1ff;
border: none;
outline: none;
text-align: left;
background-color: transparent;
padding: 1.2rem 0rem;
}
.btn-danger {
color: #F56C6C;
font-weight: 700;
}
</style> 
+26
src/components/configSetting/TimesRangeField.vue
<template>
<el-form-item class="config-item-wrap">
<times-range v-model="value.value" :disabled="value.descriptor.readonly"></times-range>
</el-form-item>
</template>
<script type="text/javascript">
import timesRange from './TimesRange'
export default {
name: 'timesrangefield',
components: {
timesRange
},
data() {
return {
concealed: false
}
},
props: {
value: { required: true }
},
methods: {}
}
</script>
<style type="text/css">
</style> 
+1
-1
package.json

@@ -56,3 +56,3 @@ {

},
"version": "1.0.6"
"version": "1.0.7"
}
+5
-4
src/components/configSetting/ConfigItem.vue

@@ -19,2 +19,3 @@ <template>

import selectfield from './selectfield.vue';
import timesrangefield from './TimesRangeField.vue';
import { getByteLength } from '@fouro/all-in-one/lib/utils/kit.js'

@@ -29,3 +30,4 @@ export default {

togglefield,
selectfield
selectfield,
timesrangefield
},

@@ -78,2 +80,4 @@ props: {

return 'togglefield';
case 'timesrange':
return 'timesrangefield';
case 'text':

@@ -87,7 +91,4 @@ case 'textarea':

{
return null;
}
}

@@ -94,0 +95,0 @@ }

+4
-4
src/components/configSetting/Container.vue

@@ -6,3 +6,3 @@ <template>

<el-form>
<slot name="items"></slot>
<slot name="items" v-show="false"></slot>
</el-form>

@@ -45,3 +45,3 @@ </div>

.config-container .el-form-item {
.config-container .el-form .el-form-item {
width: 100%;

@@ -54,3 +54,3 @@ margin: 0;

.config-container .el-form-item .el-form-item__label {
.config-container .el-form .el-form-item .el-form-item__label {
vertical-align: middle;

@@ -63,3 +63,3 @@ line-height: 4.6rem;

.config-container .el-form-item .el-form-item__content {
.config-container .el-form .el-form-item .el-form-item__content {
text-align: right;

@@ -66,0 +66,0 @@ height: 100%;