@neatui/nuxt 0.1.0 → 1.0.0

package/src/components/loader/LimitLoader/LimitLoader@v3.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="full-x" ui-flex="row xt">
-    <div class="mr-mm-sub my-sm-sub" ui-flex="row lm :wrap">
+  <div class="w-full" ui-flex="row xt">
+    <div class="flex-block mr-mm-sub my-sm-sub" ui-flex="row lm wrap">
       <template v-for="(item, idx) in state.limit" :key="idx">
         <div v-if="!item._close" ui-flex="row lm" v-bind="{ ...(item.attrs || {}) }">
           <span class="nr-sm flex-fixed o-ls">{{ item.label }}{{ item.label ? ':' : '' }}</span>
@@ -22,11 +22,17 @@
         </div>
       </template>
     </div>
-    <div class="mr-sl-sub my-sm-sub nowrap" ui-hide="<pad">
-      <IFollowView tipBoxClass="nr-no">
-        <button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
+    <div class="flex-fixed mr-sl-sub my-sm-sub nowrap" ui-flex="row rm" ui-hide="<pad">
+      <IFollowView v-if="tools" tipBoxClass="nr-no">
+        <button class="bg-fore" ui-btn="@a s case :border :square">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="co-read fs-ss" style="width: 1em; height: 1em">
+            <path
+              d="M372 981.6c-80 0-154.4-43.2-195.2-112L35.2 624.8c-40-68.8-40-155.2 0-224.8l141.6-244.8c40-69.6 115.2-112 195.2-112h282.4c80 0 154.4 43.2 195.2 112L991.2 400c40 68.8 40 155.2 0 224.8l-141.6 244.8c-40 69.6-115.2 112-195.2 112H372z m0-825.6c-39.2 0-76.8 21.6-96.8 56L134.4 456c-20 34.4-20 76.8 0 112l140.8 244.8c20 34.4 56.8 55.2 96.8 55.2h282.4c39.2 0 76.8-21.6 96.8-56l140.8-244.8c20-34.4 20-76.8 0-112L751.2 211.2c-20-34.4-56.8-55.2-96.8-55.2H372z m140.8 552.8c-108.8 0-196.8-88-196.8-196.8 0-108.8 88-196.8 196.8-196.8 108.8 0 196.8 88 196.8 196.8 0.8 108.8-88 196.8-196.8 196.8z m0-280c-45.6 0-83.2 37.6-83.2 83.2s37.6 83.2 83.2 83.2c22.4 0 43.2-8.8 59.2-24 16-16 24-36.8 24-59.2 0-45.6-37.6-83.2-83.2-83.2z"
+            />
+          </svg>
+        </button>
         <template v-if="state.limit.length" #tips>
-          <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
+          <div class="w-mm max-h-ls n-sl" ui-scroll="x:hidden :y">
             <div v-for="(item, idx) in state.limit" :key="idx" class="item ux-hover nowrap r-ss">
               <label class="ny-xs nx-sm" ui-form="@a type:checkbox">
                 <input :checked="!item._close" type="checkbox" @change="item._close = item._close ? 0 : 1" />
@@ -36,25 +42,10 @@
           </div>
         </template>
       </IFollowView>
-      <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+      <button class="bg-fore" ui-btn="@a s case :border" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+      <button class="bg-fore" ui-btn="@a s case :border" @click="fSearch">{{ words['common.search'] || '搜索' }}</button>
     </div>
   </div>
-  <div class="mr-sl-sub my-sm-sub nowrap" ui-hide=">mob">
-    <IFollowView tipBoxClass="nr-no">
-      <button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
-      <template v-if="state.limit.length" #tips>
-        <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
-          <div v-for="(item, idx) in state.limit" :key="idx" class="item ux-hover nowrap r-ss">
-            <label class="ny-xs nx-sm" ui-form="@a type:checkbox">
-              <input :checked="!item._close" type="checkbox" @change="item._close = item._close ? 0 : 1" />
-              <span>{{ item.label }}</span>
-            </label>
-          </div>
-        </div>
-      </template>
-    </IFollowView>
-    <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
-  </div>
 </template>
 <script lang="ts" setup>
   import { computed, reactive, watch } from 'vue';
@@ -91,20 +82,28 @@
     words?: { [key: string | number]: any };
     limit: Array<LimitProps>;
     param: any;
+    tools?: boolean;
   }
 
   const props: any = withDefaults(defineProps<Props>(), {
     words: () => ({}),
     limit: () => [],
-    param: () => ({})
+    param: () => ({}),
+    tools: false,
   });
 
+  // 定义emit事件
+  const emits = defineEmits<{
+    search: [param: any];
+  }>();
+
   // 内部数据
   const state: any = reactive({
     name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
     limit: [],
-    param: {}
+    param: {},
   });
+
   // 监听外部配置
   watch(
     () => props.limit,
@@ -144,8 +143,9 @@
         return item;
       });
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
+
   // 缓存交互配置
   watch(
     [() => state.limit],
@@ -161,7 +161,7 @@
       });
       localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
     },
-    { deep: true }
+    { deep: true },
   );
 
   watch(
@@ -169,7 +169,7 @@
     () => {
       state.param = props.param;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 重置筛选
@@ -179,5 +179,16 @@
         delete state.param[key];
       }
     }
+    // 触发搜索事件
+    emits('search', state.param);
+  };
+
+  // 搜索功能
+  const fSearch = () => {
+    // 重置页码
+    if (state.param.page) {
+      state.param.page = 1;
+    }
+    emits('search', state.param);
   };
 </script>