@neatui/nuxt 1.6.7 → 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 +101 -93
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/nuxt",
3
- "version": "1.6.7",
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,54 +1,62 @@
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
- import PullLoad, { Easing } from '@fekit/pullload';
35
- const emits = defineEmits(['onpull', 'onload']);
36
- const props: any = defineProps({
37
- pull: {
38
- type: Boolean,
39
- default: false,
40
- },
41
- load: {
42
- type: Boolean,
43
- default: false,
44
- },
45
- stable: {
46
- type: Boolean,
47
- default: false,
48
- },
49
- });
50
- const root: any = ref(null);
51
- const demo: any = ref(null);
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 } });
57
+
58
+ if (import.meta.client) {
59
+ const { default: PullLoad, Easing } = await import("@fekit/pullload");
52
60
  demo.value = new PullLoad({
53
61
  easing: Easing.easeOut,
54
62
  friction: 0.3,
@@ -57,75 +65,75 @@
57
65
  ...(props.pull
58
66
  ? {
59
67
  onpull: async () => {
60
- emits('onpull', demo.value);
68
+ emits("onpull", demo.value);
61
69
  },
62
70
  }
63
71
  : {}),
64
- ...(props.pull
72
+ ...(props.load
65
73
  ? {
66
74
  onload: async () => {
67
- emits('onload', demo.value);
75
+ emits("onload", demo.value);
68
76
  },
69
77
  }
70
78
  : {}),
71
79
  });
80
+ }
72
81
 
73
- onMounted(() => {
74
- if (root.value) {
75
- demo.value?.listen(root.value);
76
- if (props.pull) {
77
- demo.value?.ispull();
78
- }
82
+ onMounted(() => {
83
+ if (root.value) {
84
+ demo.value?.listen?.(root.value);
85
+ if (props.pull) {
86
+ demo.value?.ispull?.();
79
87
  }
80
- });
81
- onBeforeUnmount(() => {
82
- demo.value?.remove();
83
- });
88
+ }
89
+ });
90
+ onBeforeUnmount(() => {
91
+ demo.value?.remove?.();
92
+ });
84
93
 
85
- const pullload = () => {
86
- demo.value?.ispull();
87
- };
94
+ const pullload = () => {
95
+ demo.value?.ispull?.();
96
+ };
88
97
 
89
- defineExpose({ pullload, ex: () => demo.value });
98
+ defineExpose({ pullload, ex: () => demo.value });
90
99
  </script>
91
100
 
92
101
  <style lang="scss">
93
- .fekit-ipull-scroll {
94
- [fekit-pullload-head],
95
- [fekit-pullload-foot] {
96
- position: absolute;
97
- width: 100%;
98
- height: 2em;
99
- left: 0;
100
- display: flex;
101
- justify-content: center;
102
- align-items: center;
103
- align-content: center;
104
- }
105
- [fekit-pullload-head] {
106
- bottom: 100%;
107
- margin-bottom: 1em;
108
- }
109
- [fekit-pullload-foot] {
110
- position: relative;
111
- top: 100%;
112
- }
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
+ }
113
121
 
114
- .fekit-pullload-fade-enter-active,
115
- .fekit-pullload-fade-leave-active {
116
- transition: opacity 0.2s;
117
- }
118
- .fekit-pullload-fade-enter,
119
- .fekit-pullload-fade-leave-to {
120
- opacity: 0;
121
- }
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
+ }
122
130
 
123
- .pulldown {
124
- transition: all 0.3s;
125
- display: inline-block;
126
- &.toup {
127
- transform: rotate(180deg);
128
- }
131
+ .pulldown {
132
+ transition: all 0.3s;
133
+ display: inline-block;
134
+ &.toup {
135
+ transform: rotate(180deg);
129
136
  }
130
137
  }
138
+ }
131
139
  </style>