@neatui/nuxt 1.6.8 → 1.6.9

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/basic/IScrollView.vue +117 -112
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/nuxt",
3
- "version": "1.6.8",
3
+ "version": "1.6.9",
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>