@neatui/vue 2.3.0 → 2.5.0

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 (11) hide show
  1. package/package.json +7 -6
  2. package/src/components/basic/IDraggable.vue +85 -63
  3. package/src/components/basic/IFollowView.vue +18 -18
  4. package/src/components/form/ImgUpload.vue +4 -4
  5. package/src/components/loader/LayerLoader/LayerLoader.vue +318 -0
  6. package/src/components/loader/LayerLoader/index.ts +2 -0
  7. package/src/components/loader/LayerLoader/style.scss +77 -0
  8. package/src/components/loader/MoveLoader/MoveLoader.vue +628 -0
  9. package/src/components/loader/MoveLoader/index.ts +2 -0
  10. package/src/components/loader/MoveLoader/style.scss +77 -0
  11. package/src/components/loader/TableLoader/TableLoader.vue +10 -26
package/src/components/loader/MoveLoader/style.scss ADDED
@@ -0,0 +1,77 @@
1
+ .fekit-layer-loader-item {
2
+ user-select: none;
3
+ line-height: 1.2;
4
+ }
5
+
6
+ // 箭头
7
+ [ui-arrow] {
8
+ position: relative;
9
+ width: 1em;
10
+ height: 1em;
11
+ left: 0.1em;
12
+
13
+ // &[ui-arrow~='0'] {
14
+ // &::before {
15
+ // position: absolute;
16
+ // display: inline-block;
17
+ // content: '';
18
+ // width: 0.5em;
19
+ // height: 0.5em;
20
+ // border: 1px solid currentColor;
21
+ // top: 0.25em;
22
+ // left: 0.3em;
23
+ // border-radius: 50%;
24
+ // }
25
+ // }
26
+ &[ui-arrow~='0'] {
27
+ height: 1px;
28
+ border-bottom: 1px dotted var(--co-case);
29
+ position: relative;
30
+ left: -5px;
31
+ }
32
+
33
+ &[ui-arrow~='1'] {
34
+ &::before {
35
+ position: absolute;
36
+ display: inline-block;
37
+ content: '';
38
+ width: 0;
39
+ height: 0;
40
+ border-width: 0.35em 0 0.35em 0.35em;
41
+ border-style: solid;
42
+ border-color: transparent;
43
+ border-left-color: transparent;
44
+ border-left-color: currentColor;
45
+ top: 0.2em;
46
+ left: 0.35em;
47
+ transform: rotate(90deg);
48
+ border-radius: 25%;
49
+ }
50
+ }
51
+
52
+ &[ui-folding~='true']::before {
53
+ transform: rotate(0deg);
54
+ }
55
+ }
56
+
57
+ // 线条
58
+ [ui-lines] {
59
+ position: relative;
60
+ &::before {
61
+ position: absolute;
62
+ content: '';
63
+ display: block;
64
+ width: 5px;
65
+ height: 100%;
66
+ left: 0.85em;
67
+
68
+ border-left: 1px dotted var(--co-case);
69
+ border-bottom: 1px dotted var(--co-case);
70
+ }
71
+ }
72
+
73
+ .fekit-layer-node-active {
74
+ .layer-loader-tool {
75
+ opacity: 1;
76
+ }
77
+ }
package/src/components/loader/TableLoader/TableLoader.vue CHANGED
@@ -18,16 +18,8 @@
18
18
  </button>
19
19
  <template #tips>
20
20
  <div class="w-mm h-ls n-sl" ui-scroll="x:hidden :y">
21
- <draggable
22
- v-model="state.table"
23
- :force-fallback="false"
24
- item-key="name"
25
- chosen-class="chosen"
26
- animation="200"
27
- filter=".forbid"
28
- :move="(e: any) => !e.relatedContext.element.fixed"
29
- >
30
- <template #item="{ element, index }">
21
+ <IDraggable v-model:lists="state.table">
22
+ <template #default="{ item: element, idx: index }">
31
23
  <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
32
24
  <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
33
25
  <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
@@ -38,7 +30,7 @@
38
30
  </label>
39
31
  </div>
40
32
  </template>
41
- </draggable>
33
+ </IDraggable>
42
34
  </div>
43
35
  </template>
44
36
  </IFollowView>
@@ -54,16 +46,8 @@
54
46
  </button>
55
47
  <template #tips>
56
48
  <div class="w-mm h-ls n-sl" ui-scroll="x:hidden :y">
57
- <draggable
58
- v-model="state.table"
59
- :force-fallback="false"
60
- item-key="name"
61
- chosen-class="chosen"
62
- animation="200"
63
- filter=".forbid"
64
- :move="(e: any) => !e.relatedContext.element.fixed"
65
- >
66
- <template #item="{ element, index }">
49
+ <IDraggable v-model:lists="state.table">
50
+ <template #default="{ item: element, idx: index }">
67
51
  <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
68
52
  <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
69
53
  <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
@@ -74,7 +58,7 @@
74
58
  </label>
75
59
  </div>
76
60
  </template>
77
- </draggable>
61
+ </IDraggable>
78
62
  </div>
79
63
  </template>
80
64
  </IFollowView>
@@ -117,8 +101,8 @@
117
101
  <IFollowView>
118
102
  <button :ui-btn="`@a none s :square`"><Icon name="tableloader-setting" class="co-read"></Icon></button>
119
103
  <template #tips>
120
- <draggable :list="state.table" :force-fallback="false" item-key="name" chosen-class="chosen" animation="200">
121
- <template #item="{ element, index }">
104
+ <IDraggable v-model:lists="state.table">
105
+ <template #default="{ item: element, idx: index }">
122
106
  <div class="item ux-hover nowrap r-ss" :key="index">
123
107
  <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
124
108
  <input type="checkbox" :checked="!element._close" @change="element._close = element._close ? 0 : 1" />
@@ -126,7 +110,7 @@
126
110
  </label>
127
111
  </div>
128
112
  </template>
129
- </draggable>
113
+ </IDraggable>
130
114
  </template>
131
115
  </IFollowView>
132
116
  </div>
@@ -165,7 +149,7 @@
165
149
  <script setup lang="ts">
166
150
  import { computed, onMounted, reactive, watch, ref, nextTick, onUnmounted, useSlots } from 'vue';
167
151
  import { useRoute, useRouter } from 'vue-router';
168
- import draggable from 'vuedraggable';
152
+ import IDraggable from '../../basic/IDraggable.vue';
169
153
  import { IFollowView, Icon } from '../../basic';
170
154
  import { itable } from '@fekit/itable';
171
155
  import TableColView from './TableColView.vue';