@neatui/vue 2.15.2 → 2.15.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neatui/vue",
|
|
3
|
-
"version": "2.15.
|
|
3
|
+
"version": "2.15.3",
|
|
4
4
|
"description": "basic component ui",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"@fekit/scrollto": "^3.0.3",
|
|
29
29
|
"@fekit/toast": "^2.7.2",
|
|
30
30
|
"@fekit/utils": "^4.3.1",
|
|
31
|
+
"@neatui/css": "^3.10.3",
|
|
31
32
|
"@rollup/plugin-commonjs": "^26.0.1",
|
|
32
33
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
33
34
|
"@vue/compiler-sfc": "^3.4.30",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div class="mt-mm" ui-note="@b risk">抠图和压缩处理需要较长时间，期间请耐心等待不要关闭本窗口或进行操作，本功能需要付费，请尽量珍惜每一次处理避免不必要的浪费～</div>
|
|
4
4
|
<div v-if="state.img" class="photo-editor-viewer bg-weak my-mm" ui-flex="row">
|
|
5
5
|
<div class="mr-mm" style="flex: 1">
|
|
6
|
-
<vue-cropper ref="cropperRef" :img="state.img" :
|
|
6
|
+
<vue-cropper ref="cropperRef" :img="state.img" :auto-crop="state.autoCrop" @real-time="realTime" />
|
|
7
7
|
</div>
|
|
8
8
|
<div style="flex: 1" class="photo-editor-transparent">
|
|
9
9
|
<img :src="state.previews || ''" />
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
import { VueCropper } from 'vue-cropper/next';
|
|
33
33
|
import Compressor from 'compressorjs';
|
|
34
34
|
import { LayerById } from '../basic';
|
|
35
|
-
import axios from 'axios';
|
|
35
|
+
// import axios from 'axios';
|
|
36
36
|
import 'vue-cropper/next/dist/index.css';
|
|
37
37
|
|
|
38
38
|
const props: any = defineProps({
|
|
39
39
|
layerId: {
|
|
40
40
|
type: String,
|
|
41
|
-
default: 'PhotoEditor'
|
|
42
|
-
}
|
|
41
|
+
default: 'PhotoEditor',
|
|
42
|
+
},
|
|
43
43
|
});
|
|
44
44
|
|
|
45
45
|
const state = reactive({
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
// outputType: 'jepg', // 裁剪生成图片格式
|
|
48
48
|
autoCrop: true,
|
|
49
49
|
previews: null, //base格式
|
|
50
|
-
cropLoad: 0
|
|
50
|
+
cropLoad: 0,
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
const emit = defineEmits(['fileChange']);
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
success: resolve,
|
|
64
64
|
maxWidth: 1000,
|
|
65
65
|
maxHeight: 700,
|
|
66
|
-
error: reject
|
|
66
|
+
error: reject,
|
|
67
67
|
});
|
|
68
68
|
});
|
|
69
69
|
const _file = blobToFile(blob);
|
|
@@ -91,36 +91,36 @@
|
|
|
91
91
|
if (!state.cropLoad) {
|
|
92
92
|
state.cropLoad = 1;
|
|
93
93
|
|
|
94
|
-
const formData = {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
};
|
|
112
|
-
const res: any = await axios.post(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
);
|
|
117
|
-
if (res.status === 200) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
94
|
+
// const formData = {
|
|
95
|
+
// image_file_b64: state.previews,
|
|
96
|
+
// image_url: '',
|
|
97
|
+
// size: 'preview',
|
|
98
|
+
// type: 'auto',
|
|
99
|
+
// type_level: '1',
|
|
100
|
+
// format: 'auto',
|
|
101
|
+
// roi: '0% 0% 100% 100%',
|
|
102
|
+
// crop: false,
|
|
103
|
+
// crop_margin: '0',
|
|
104
|
+
// scale: 'original',
|
|
105
|
+
// position: 'original',
|
|
106
|
+
// channels: 'rgba',
|
|
107
|
+
// add_shadow: false,
|
|
108
|
+
// semitransparency: true,
|
|
109
|
+
// bg_color: '',
|
|
110
|
+
// bg_image_url: '',
|
|
111
|
+
// };
|
|
112
|
+
// const res: any = await axios.post(
|
|
113
|
+
// 'https://api.remove.bg/v1.0/removebg',
|
|
114
|
+
// { ...formData },
|
|
115
|
+
// { responseType: 'arraybuffer', headers: { 'X-Api-Key': 'kg4jrcKZd6Gjdx5CmBYmksuN' } },
|
|
116
|
+
// );
|
|
117
|
+
// if (res.status === 200) {
|
|
118
|
+
// const blob = new Blob([res.data], { type: 'image/png' });
|
|
119
|
+
// blobToDataURI(blob, (data: any) => {
|
|
120
|
+
// state.previews = data;
|
|
121
|
+
// state.cropLoad = 0;
|
|
122
|
+
// });
|
|
123
|
+
// }
|
|
124
124
|
}
|
|
125
125
|
};
|
|
126
126
|
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
</div>
|
|
67
67
|
</div>
|
|
68
68
|
<div v-if="!state.isNoTime" class="ny-sm nx-ms">
|
|
69
|
-
<div class="full ac b-solid bk-
|
|
69
|
+
<div class="full ac b-solid bk-line b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
|
|
70
70
|
<ul
|
|
71
71
|
:style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
|
|
72
72
|
class="fekit-date-view-time-scroll"
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
</div>
|
|
8
8
|
</div>
|
|
9
9
|
<div ui-btns="@a none s" @click="setPanelType()">
|
|
10
|
-
<p v-if="state.type
|
|
10
|
+
<p v-if="state.type === 2" class="nowrap" ui-flex="row cm">
|
|
11
11
|
<b class="nx-ss">{{ panel.sta }}年</b>
|
|
12
12
|
<span class="nx-xs">-</span>
|
|
13
13
|
<b class="nx-ss">{{ panel.end }}年</b>
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
|
-
<div ui-date-body="" class="flex-block pr">
|
|
29
|
+
<div ui-date-body="" class="flex-block pr min-h-ls+">
|
|
30
30
|
<div v-if="state.type === 2" class="full n-ms">
|
|
31
31
|
<ul ui-row="mob-6" class="n-ms ny-sm-sub">
|
|
32
32
|
<li v-for="(year, idx) in panel.years" :key="idx" ui-flex="col cm" @click="setDateValue('y', year)">
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
</ul>
|
|
52
52
|
</div>
|
|
53
53
|
<div v-else class="full">
|
|
54
|
-
<ul ui-flex="row am" class="fs-xs nx-sm nt-
|
|
54
|
+
<ul ui-flex="row am" class="fs-xs nx-sm nt-ss">
|
|
55
55
|
<li class="flex-block ac"><span>日</span></li>
|
|
56
56
|
<li class="flex-block ac"><span>一</span></li>
|
|
57
57
|
<li class="flex-block ac"><span>二</span></li>
|
|
@@ -73,9 +73,9 @@
|
|
|
73
73
|
>
|
|
74
74
|
<div
|
|
75
75
|
ui-flex="col cm"
|
|
76
|
-
class="r-sm b-solid bk-none b-xs my-ss ux-scale
|
|
76
|
+
class="r-sm b-solid bk-none b-xs my-ss ux-scale"
|
|
77
77
|
style="width: 1.8em; height: 1.8em"
|
|
78
|
-
:class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-
|
|
78
|
+
:class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-w' : 'bg-weak:hover co-main:hover'}`"
|
|
79
79
|
>
|
|
80
80
|
<span>{{ item.day }}</span>
|
|
81
81
|
</div>
|
|
@@ -86,54 +86,57 @@
|
|
|
86
86
|
</ul>
|
|
87
87
|
</div>
|
|
88
88
|
</div>
|
|
89
|
-
<
|
|
90
|
-
<div
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
89
|
+
<template v-if="!state.isNoTime">
|
|
90
|
+
<div v-if="state.type === 0" class="h-ss ny-sm nx-ms">
|
|
91
|
+
<div class="full ac b-solid bk-back b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
|
|
92
|
+
<ul
|
|
93
|
+
:style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
|
|
94
|
+
class="fekit-date-view-time-scroll"
|
|
95
|
+
ref="ths"
|
|
96
|
+
ui-scroll=":y xs"
|
|
97
|
+
ui-btns="@a none s :block"
|
|
98
|
+
data-type="h"
|
|
99
|
+
@scroll="timeScroll"
|
|
100
|
+
>
|
|
101
|
+
<li v-for="(item, idx) in hours" :key="idx">
|
|
102
|
+
{{ item }}
|
|
103
|
+
</li>
|
|
104
|
+
</ul>
|
|
105
|
+
<ul
|
|
106
|
+
:style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
|
|
107
|
+
class="fekit-date-view-time-scroll"
|
|
108
|
+
ref="tms"
|
|
109
|
+
ui-scroll=":y xs"
|
|
110
|
+
ui-btns="@a none s :block"
|
|
111
|
+
data-type="m"
|
|
112
|
+
@scroll="timeScroll"
|
|
113
|
+
>
|
|
114
|
+
<li v-for="(item, idx) in seconds" :key="idx">
|
|
115
|
+
{{ item }}
|
|
116
|
+
</li>
|
|
117
|
+
</ul>
|
|
118
|
+
<ul
|
|
119
|
+
:style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
|
|
120
|
+
class="fekit-date-view-time-scroll"
|
|
121
|
+
ref="tss"
|
|
122
|
+
ui-scroll=":y xs"
|
|
123
|
+
ui-btns="@a none s :block"
|
|
124
|
+
data-type="s"
|
|
125
|
+
@scroll="timeScroll"
|
|
126
|
+
>
|
|
127
|
+
<li v-for="(item, idx) in seconds" :key="idx">
|
|
128
|
+
{{ item }}
|
|
129
|
+
</li>
|
|
130
|
+
</ul>
|
|
131
|
+
</div>
|
|
130
132
|
</div>
|
|
131
|
-
|
|
133
|
+
<div v-else class="h-ss"></div>
|
|
134
|
+
</template>
|
|
132
135
|
<div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
|
|
133
136
|
<div ui-flex="row lm" class="nl-ss">
|
|
134
137
|
<div v-if="state.panel" ui-flex="row lm">
|
|
135
|
-
<span :anim-editing="state.type ===
|
|
136
|
-
<span v-if="!state.isNoTime" :anim-editing="state.type ===
|
|
138
|
+
<span :anim-editing="state.type === 0" class="nx-ss">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
|
|
139
|
+
<span v-if="!state.isNoTime" :anim-editing="state.type === 0" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span>
|
|
137
140
|
</div>
|
|
138
141
|
<div v-else-if="state.shortcuts?.length" ui-flex="row lm">
|
|
139
142
|
<div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
|
|
@@ -153,12 +156,9 @@
|
|
|
153
156
|
<script setup lang="ts">
|
|
154
157
|
import { computed, ref, reactive, watch, onMounted } from 'vue';
|
|
155
158
|
import { isDateString, isObject, isString } from '@fekit/utils';
|
|
156
|
-
// import { idate } from '@fekit/utils';
|
|
157
159
|
import { idate } from './date';
|
|
158
160
|
import { Icon } from '../basic';
|
|
159
161
|
|
|
160
|
-
// const _level: any = { 0: ['d', 1], 1: ['m', 1], 2: ['y', 10], 3: ['y', 100] };
|
|
161
|
-
|
|
162
162
|
// 创建日期
|
|
163
163
|
const cDate = (date: any = null) => {
|
|
164
164
|
return isDateString(date) ? new Date(date) : new Date();
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
picker: 'date',
|
|
219
219
|
// 额外内容
|
|
220
220
|
extras: (item: any) => {
|
|
221
|
-
return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.
|
|
221
|
+
return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.5em; height:.5em;"></i>`;
|
|
222
222
|
},
|
|
223
223
|
// 快捷选择
|
|
224
224
|
shortcuts: () => ['yesterday', 'today', 'tomorrow'],
|
|
@@ -256,7 +256,6 @@
|
|
|
256
256
|
years: 0,
|
|
257
257
|
// 当前时间计算
|
|
258
258
|
curr: computed(() => {
|
|
259
|
-
// console.log(158, state.panel);
|
|
260
259
|
const date = idate(state.panel);
|
|
261
260
|
const days = date.calendar({ group: true, value: [state.panel] });
|
|
262
261
|
return { days, ...date.attr };
|
|
@@ -303,7 +302,7 @@
|
|
|
303
302
|
const setDateValue = (type: any, value: number = 0, add: number = 0) => {
|
|
304
303
|
state.panel = upload(type, value, add);
|
|
305
304
|
// 面板返回上一级
|
|
306
|
-
state.type
|
|
305
|
+
state.type = Math.max(0, state.type - 1);
|
|
307
306
|
};
|
|
308
307
|
|
|
309
308
|
// 时分秒
|
|
@@ -420,8 +419,10 @@
|
|
|
420
419
|
|
|
421
420
|
// 向外通信
|
|
422
421
|
const change = (item: any) => {
|
|
423
|
-
|
|
424
|
-
|
|
422
|
+
const panelValue = item ? idate(item.date).format(props.format) : item;
|
|
423
|
+
state.panel = panelValue;
|
|
424
|
+
state.value = panelValue;
|
|
425
|
+
emits('change', panelValue);
|
|
425
426
|
if (state.isNoTime) {
|
|
426
427
|
update();
|
|
427
428
|
}
|
|
@@ -441,7 +442,7 @@
|
|
|
441
442
|
|
|
442
443
|
// 面板类型
|
|
443
444
|
const setPanelType = () => {
|
|
444
|
-
if (state.type <
|
|
445
|
+
if (state.type < 2) {
|
|
445
446
|
state.type += 1;
|
|
446
447
|
}
|
|
447
448
|
};
|
|
@@ -456,16 +457,18 @@
|
|
|
456
457
|
_timer.value = setTimeout(() => {
|
|
457
458
|
const h = item.offsetHeight;
|
|
458
459
|
const idx = Math.floor(ev.target.scrollTop / h);
|
|
460
|
+
const maxIdx = type === 'h' ? 23 : 59;
|
|
461
|
+
const safeIdx = Math.min(Math.max(idx, 0), maxIdx);
|
|
459
462
|
const { YYYY = 0, MM = 0, DD = 0, HH = '', mm = '', ss = '' }: any = state.curr || {};
|
|
460
463
|
let _panel = `${YYYY}-${MM}-${DD}`;
|
|
461
464
|
if (type === 'h') {
|
|
462
|
-
_panel += ` ${
|
|
465
|
+
_panel += ` ${safeIdx}:${mm}:${ss}`;
|
|
463
466
|
}
|
|
464
467
|
if (type === 'm') {
|
|
465
|
-
_panel += ` ${HH}:${
|
|
468
|
+
_panel += ` ${HH}:${safeIdx}:${ss}`;
|
|
466
469
|
}
|
|
467
470
|
if (type === 's') {
|
|
468
|
-
_panel += ` ${HH}:${mm}:${
|
|
471
|
+
_panel += ` ${HH}:${mm}:${safeIdx}`;
|
|
469
472
|
}
|
|
470
473
|
state.panel = idate(_panel).format('YYYY-MM-DD HH:mm:ss');
|
|
471
474
|
}, 100);
|
package/src/utils/theme.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// 主题
|
|
2
|
-
export const theme = (then
|
|
2
|
+
export const theme = (then: (theme: string) => void = () => {}) => {
|
|
3
3
|
// 自动设置主题
|
|
4
4
|
const auto = (scheme: any) => {
|
|
5
5
|
const _theme = window.localStorage.getItem('theme') || (scheme.matches ? 'dark' : 'light');
|