@neatui/nuxt 1.6.8 → 1.6.10

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/basic/IScrollView.vue +117 -112
  3. package/src/components/form/Input@v3.vue +24 -2
  4. /package/src/components/form/{TextArea.vue → Textarea.vue} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/nuxt",
3
- "version": "1.6.8",
3
+ "version": "1.6.10",
4
4
  "description": "NeatUI component library for Nuxt 3",
5
5
  "main": "./src/index.ts",
6
6
  "license": "MIT",
package/src/components/basic/IScrollView.vue CHANGED
@@ -1,134 +1,139 @@
1
1
  <template>
2
- <div class="fekit-ipull-scroll" :ui-scroll="`:y ${stable ? 'stable' : ''}`" ref="root">
3
- <div>
2
+ <div
3
+ class="fekit-ipull-scroll"
4
+ :ui-scroll="`:y ${stable ? 'stable' : ''}`"
5
+ ref="root"
6
+ >
7
+ <div class="full">
4
8
  <div class="fs-xs co-text o-mm" fekit-pullload-head="" v-if="pull">
5
- <div v-show="demo.store.pull < 2" ui-flex="row cm">
6
- <i class="pulldown icon icon-pulldown" :class="`${demo.store.pull === 1 ? 'toup' : ''}`"></i>
7
- <span v-show="demo.store.pull === 0">下拉刷新</span>
8
- <span v-show="demo.store.pull === 1">松开加载</span>
9
- </div>
10
- <div v-show="demo.store.pull === 2" ui-flex="row cm">
11
- <span ui-load="@d"></span>
12
- <!-- <span>正在刷新</span> -->
13
- </div>
14
- <div v-show="demo.store.pull === 3" ui-flex="row cm">
15
- <span>刷新完成</span>
16
- </div>
17
- </div>
18
- <slot></slot>
19
- <div class="fs-xs co-text o-mm mb-sm" fekit-pullload-foot="" v-if="load">
20
- <transition name="fekit-pullload-fade" mode="out-in">
21
- <div v-if="demo.store.load === 2" ui-flex="row cm">
9
+ <slot name="pull-head" :state="demo.store.pull">
10
+ <div v-show="demo.store.pull < 2" ui-flex="row cm">
11
+ <i class="pulldown icon icon-pulldown" :class="`${demo.store.pull === 1 ? 'toup' : ''}`"></i>
12
+ <span v-show="demo.store.pull === 0">下拉刷新</span>
13
+ <span v-show="demo.store.pull === 1">松开加载</span>
14
+ </div>
15
+ <div v-show="demo.store.pull === 2" ui-flex="row cm">
22
16
  <span ui-load="@d"></span>
23
- <!-- <span>正在加载</span> -->
24
17
  </div>
25
- <div v-else-if="demo.store.load === 3">没有更多了</div>
26
- <div v-else>&nbsp;</div>
27
- </transition>
18
+ <div v-show="demo.store.pull === 3" ui-flex="row cm">
19
+ <span>刷新完成</span>
20
+ </div>
21
+ </slot>
22
+ </div>
23
+ <slot></slot>
24
+ <div class="fs-xs co-text o-mm my-sm" fekit-pullload-foot="" v-if="load">
25
+ <slot name="load-foot" :state="demo.store.load">
26
+ <transition name="fekit-pullload-fade" mode="out-in">
27
+ <div v-if="demo.store.load === 2" ui-flex="row cm">
28
+ <span ui-load="@d"></span>
29
+ </div>
30
+ <div v-else-if="demo.store.load === 3">没有更多了</div>
31
+ <div v-else>&nbsp;</div>
32
+ </transition>
33
+ </slot>
28
34
  </div>
29
35
  </div>
30
36
  </div>
31
37
  </template>
32
38
  <script setup lang="ts">
33
- import { onMounted, onBeforeUnmount, ref } from 'vue';
34
- const emits = defineEmits(['onpull', 'onload']);
35
- const props: any = defineProps({
36
- pull: {
37
- type: Boolean,
38
- default: false,
39
- },
40
- load: {
41
- type: Boolean,
42
- default: false,
43
- },
44
- stable: {
45
- type: Boolean,
46
- default: false,
47
- },
48
- });
49
- const root: any = ref(null);
50
- const demo: any = ref({ store: { pull: 0, load: 0 } });
39
+ import { onMounted, onBeforeUnmount, ref } from "vue";
40
+ const emits = defineEmits(["onpull", "onload"]);
41
+ const props: any = defineProps({
42
+ pull: {
43
+ type: Boolean,
44
+ default: false,
45
+ },
46
+ load: {
47
+ type: Boolean,
48
+ default: false,
49
+ },
50
+ stable: {
51
+ type: Boolean,
52
+ default: false,
53
+ },
54
+ });
55
+ const root: any = ref(null);
56
+ const demo: any = ref({ store: { pull: 0, load: 0 } });
51
57
 
52
- if (import.meta.client) {
53
- const { default: PullLoad, Easing } = await import('@fekit/pullload');
54
- demo.value = new PullLoad({
55
- easing: Easing.easeOut,
56
- friction: 0.3,
57
- triggerDistance: 60,
58
- loadingDistance: 50,
59
- ...(props.pull
60
- ? {
61
- onpull: async () => {
62
- emits('onpull', demo.value);
63
- },
64
- }
65
- : {}),
66
- ...(props.pull
67
- ? {
68
- onload: async () => {
69
- emits('onload', demo.value);
70
- },
71
- }
72
- : {}),
73
- });
74
- }
58
+ if (import.meta.client) {
59
+ const { default: PullLoad, Easing } = await import("@fekit/pullload");
60
+ demo.value = new PullLoad({
61
+ easing: Easing.easeOut,
62
+ friction: 0.3,
63
+ triggerDistance: 60,
64
+ loadingDistance: 50,
65
+ ...(props.pull
66
+ ? {
67
+ onpull: async () => {
68
+ emits("onpull", demo.value);
69
+ },
70
+ }
71
+ : {}),
72
+ ...(props.load
73
+ ? {
74
+ onload: async () => {
75
+ emits("onload", demo.value);
76
+ },
77
+ }
78
+ : {}),
79
+ });
80
+ }
75
81
 
76
- onMounted(() => {
77
- if (root.value) {
78
- demo.value?.listen?.(root.value);
79
- if (props.pull) {
80
- demo.value?.ispull?.();
81
- }
82
+ onMounted(() => {
83
+ if (root.value) {
84
+ demo.value?.listen?.(root.value);
85
+ if (props.pull) {
86
+ demo.value?.ispull?.();
82
87
  }
83
- });
84
- onBeforeUnmount(() => {
85
- demo.value?.remove?.();
86
- });
88
+ }
89
+ });
90
+ onBeforeUnmount(() => {
91
+ demo.value?.remove?.();
92
+ });
87
93
 
88
- const pullload = () => {
89
- demo.value?.ispull?.();
90
- };
94
+ const pullload = () => {
95
+ demo.value?.ispull?.();
96
+ };
91
97
 
92
- defineExpose({ pullload, ex: () => demo.value });
98
+ defineExpose({ pullload, ex: () => demo.value });
93
99
  </script>
94
100
 
95
101
  <style lang="scss">
96
- .fekit-ipull-scroll {
97
- [fekit-pullload-head],
98
- [fekit-pullload-foot] {
99
- position: absolute;
100
- width: 100%;
101
- height: 2em;
102
- left: 0;
103
- display: flex;
104
- justify-content: center;
105
- align-items: center;
106
- align-content: center;
107
- }
108
- [fekit-pullload-head] {
109
- bottom: 100%;
110
- margin-bottom: 1em;
111
- }
112
- [fekit-pullload-foot] {
113
- position: relative;
114
- top: 100%;
115
- }
102
+ .fekit-ipull-scroll {
103
+ [fekit-pullload-head],
104
+ [fekit-pullload-foot] {
105
+ position: absolute;
106
+ width: 100%;
107
+ height: 2em;
108
+ left: 0;
109
+ display: flex;
110
+ justify-content: center;
111
+ align-items: center;
112
+ align-content: center;
113
+ }
114
+ [fekit-pullload-head] {
115
+ bottom: 100%;
116
+ margin-bottom: 1em;
117
+ }
118
+ [fekit-pullload-foot] {
119
+ position: relative;
120
+ }
116
121
 
117
- .fekit-pullload-fade-enter-active,
118
- .fekit-pullload-fade-leave-active {
119
- transition: opacity 0.2s;
120
- }
121
- .fekit-pullload-fade-enter,
122
- .fekit-pullload-fade-leave-to {
123
- opacity: 0;
124
- }
122
+ .fekit-pullload-fade-enter-active,
123
+ .fekit-pullload-fade-leave-active {
124
+ transition: opacity 0.2s;
125
+ }
126
+ .fekit-pullload-fade-enter,
127
+ .fekit-pullload-fade-leave-to {
128
+ opacity: 0;
129
+ }
125
130
 
126
- .pulldown {
127
- transition: all 0.3s;
128
- display: inline-block;
129
- &.toup {
130
- transform: rotate(180deg);
131
- }
131
+ .pulldown {
132
+ transition: all 0.3s;
133
+ display: inline-block;
134
+ &.toup {
135
+ transform: rotate(180deg);
132
136
  }
133
137
  }
138
+ }
134
139
  </style>
package/src/components/form/Input@v3.vue CHANGED
@@ -17,7 +17,7 @@
17
17
  <input
18
18
  :title="props.modelValue"
19
19
  :value="props.modelValue"
20
- :type="type"
20
+ :type="inputType"
21
21
  :placeholder="placeholder"
22
22
  :disabled="disabled"
23
23
  :readonly="readonly"
@@ -30,6 +30,12 @@
30
30
  </slot>
31
31
  <div ui-form-suffix="">
32
32
  <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !disabled" @click.stop="clear"></i>
33
+ <div
34
+ class="o-ls"
35
+ v-if="type === 'password' && cipher"
36
+ :ui-form-cipher="cipherVisible ? '1' : ''"
37
+ @click.stop="toggleCipher"
38
+ ></div>
33
39
  <slot name="suffix"></slot>
34
40
  <template v-for="(item, idx) in suffix" :key="idx">
35
41
  <div v-if="isObject(item)" v-bind="item.attrs" v-on="event(item, props.modelValue)">
@@ -43,7 +49,7 @@
43
49
  </template>
44
50
 
45
51
  <script setup lang="ts">
46
- import { reactive, watch } from 'vue';
52
+ import { computed, reactive, ref, watch } from 'vue';
47
53
  import { isObject, isFunction } from '@fekit/utils';
48
54
 
49
55
  const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
@@ -65,6 +71,7 @@
65
71
  * disabled 是否禁用
66
72
  * readonly 是否只读
67
73
  * clearable 是否显示清除按钮
74
+ * cipher 密码框是否显示明密文切换
68
75
  * rules 校验规则
69
76
  * verify 是否显示校验
70
77
  * prefix 前缀内容
@@ -89,6 +96,7 @@
89
96
  disabled?: boolean;
90
97
  readonly?: boolean;
91
98
  clearable?: boolean;
99
+ cipher?: boolean;
92
100
  verify?: boolean;
93
101
  prefix?: Array<any>;
94
102
  suffix?: Array<any>;
@@ -110,6 +118,7 @@
110
118
  disabled: false,
111
119
  readonly: false,
112
120
  clearable: true,
121
+ cipher: true,
113
122
  verify: false,
114
123
  prefix: () => [],
115
124
  suffix: () => [],
@@ -124,6 +133,14 @@
124
133
  // 错误
125
134
  error: {},
126
135
  });
136
+ const cipherVisible = ref(false);
137
+
138
+ const inputType = computed(() => {
139
+ if (props.type === 'password') {
140
+ return cipherVisible.value ? 'text' : 'password';
141
+ }
142
+ return props.type;
143
+ });
127
144
  // 外部传入交互标识，主要用于外部没有输入但点击了提交，或表单提交成功后重置状态
128
145
  watch(
129
146
  () => props.interacted,
@@ -199,6 +216,11 @@
199
216
  emits('update:modelValue', null);
200
217
  emits('clear');
201
218
  }
219
+
220
+ const toggleCipher = () => {
221
+ if (props.disabled || props.readonly) return;
222
+ cipherVisible.value = !cipherVisible.value;
223
+ };
202
224
  // 输入
203
225
  const input = (e: any) => {
204
226
  // 用户交互