@neatui/vue 5.6.0 → 5.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.6.0",
+  "version": "5.6.1",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.6.0",
+    "@neatui/css": "^5.6.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/form/Cascader.vue

@@ -15,7 +15,7 @@
             <ul v-if="opt?.length" class="min-h-ms*s max-h-xl*s" :class="`nx-sm lh-ml ${optIndex === 0 ? '' : 'bl-xs b-back b-solid'}`" ui-scroll=":y s">
               <!-- 多选 -->
               <template v-if="multiple">
-                <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm r-ss" ui-wrap="no" @click="multiSelect(item, optIndex)">
+                <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" @click="multiSelect(item, optIndex)">
                   <div ui-flex="row xm">
                     <div :ui-form="`${theme} type:checkbox :block`">
                       <input
@@ -38,7 +38,7 @@
                   v-for="(item, idx) of opt"
                   :key="idx"
                   :class="item.value === state.transSelected?.value ? 'co-main' : ''"
-                  class="ux-hover nx-sm r-ss" ui-wrap="no"
+                  class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no"
                   @click="select(item, optIndex)"
                 >
                   <IFollowView :ui-tips="uiTips" v-if="item.optTips" event="hover">

package/src/components/form/MoreSelect.vue

@@ -22,13 +22,13 @@
         </div>
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
           <template v-for="(item, idx) of state.filter" :key="idx">
-            <li v-if="item.disabled" class="ux-hover nx-sm r-ss o-ms" ui-wrap="no">
+            <li v-if="item.disabled" class="ux-hover nx-sm mob:ny-ss r-ss o-ms" ui-wrap="no">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <del class="ml-sm">{{ item.label || item }}</del>
               </label>
             </li>
-            <li v-else class="ux-hover nx-sm r-ss" ui-wrap="no" @click.stop="select(item.value)">
+            <li v-else class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" @click.stop="select(item.value)">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <span class="ml-sm">{{ item.label || item }}</span>
@@ -40,7 +40,7 @@
         <ul class="nx-sm lh-sl" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm ny-ss r-ss co-main" ui-wrap="no" @click.stop="allselect()">
+            <div class="ux-hover nx-sm ny-ss mob:ny-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.selectedCount }}/{{ state.availableCount }})</span>

package/src/components/form/PageMoreSelect.vue

@@ -17,7 +17,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <li class="ux-hover nx-sm r-ss" ui-wrap="no" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
+          <li class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
             <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
@@ -28,7 +28,7 @@
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
+            <div class="ux-hover nx-sm mob:ny-ss r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <!-- <span class="ml-sm">全选({{ props.options?.length || 0 }})</span> -->

package/src/components/form/PageSelect.vue

@@ -15,7 +15,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 16em">
-          <li class="ux-hover nx-sm r-ss" ui-wrap="no" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of options" :key="idx" @click="select(item)">
+          <li class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of options" :key="idx" @click="select(item)">
             {{ item.label || item }}
           </li>
         </ul>

package/src/components/form/SearchMoreSelect.vue

@@ -15,7 +15,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <li class="ux-hover nx-sm r-ss" ui-wrap="no" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
+          <li class="ux-hover nx-sm mob:ny-ss r-ss" ui-wrap="no" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
             <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
@@ -26,7 +26,7 @@
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
+            <div class="ux-hover nx-sm mob:ny-ss r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.filter?.length || 0 }})</span>

package/src/components/form/SearchSelect.vue

@@ -18,7 +18,7 @@
         </div>
         <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <li
-            class="ux-hover nx-sm ny-ss r-ss" ui-wrap="no"
+            class="ux-hover nx-sm ny-ss mob:ny-sm r-ss" ui-wrap="no"
             :class="item.value === state.selectd?.value ? 'co-main' : ''"
             v-for="(item, idx) of state.filter"
             :key="idx"

package/src/components/form/Select.vue

@@ -21,10 +21,10 @@
         </div>
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <template v-for="(item, idx) of state.filter" :key="idx">
-            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss r-ss o-ms" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''">
+            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss mob:ny-sm r-ss o-ms" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''">
               <del>{{ item.label || item }}</del>
             </li>
-            <li v-else class="ux-hover nx-sm ny-ss r-ss" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''" @click="select(item)">
+            <li v-else class="ux-hover nx-sm ny-ss mob:ny-sm r-ss" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''" @click="select(item)">
               <span>{{ item.label || item }}</span>
             </li>
           </template>

package/src/components/form/MoreSelectPanel.vue

@@ -1,190 +0,0 @@
-<template>
-  <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
-    <IPickerView ref="ipicker" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
-      <slot>
-        <Input
-          v-bind="{ placeholder, rules, theme, sz, co, block, ready: true, type: 'text', tips, disabled, readonly, clearable: false, verify, prefix, suffix, interacted }"
-          :clearable="false"
-          readonly
-          v-model="state.value"
-          :interacted="interacted"
-        >
-          <template #suffix><i ui-form-select=""></i></template>
-        </Input>
-      </slot>
-      <template #options>
-        <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <template v-for="(item, idx) of props.options" :key="idx">
-            <li v-if="item.disable" class="ux-hover nx-sm r-ss o-ms">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
-                <del class="ml-sm">{{ item.label || item }}</del>
-              </label>
-            </li>
-            <li v-else class="ux-hover nx-sm r-ss" @click.stop="select(item.value)">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
-                <span class="ml-sm">{{ item.label || item }}</span>
-              </label>
-            </li>
-          </template>
-        </ul>
-        <div v-else class="w-full ny-ms" ui-flex="col cm" v-html="spare"></div>
-        <ul class="nx-sm lh-ml" v-if="tools">
-          <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
-          <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="state.all" />
-                <span class="ml-sm">全选({{ props.options?.length || 0 }})</span>
-              </label>
-            </div>
-            <div>
-              <button v-show="state.has" class="co-risk" ui-btn="@a none s" @click="remove">清空</button>
-            </div>
-          </li>
-        </ul>
-      </template>
-    </IPickerView>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { reactive, ref, computed, watch } from 'vue';
-  import Input from './Input.vue';
-  import { IFollowView, IPickerView } from '../basic';
-  const ipicker: any = ref(null);
-
-  const emits = defineEmits(['update:modelValue']);
-
-  /**
-   * 入参说明
-   *
-   * modelValue     值
-   * options        枚举列表
-   * tools          是否显示工具栏
-   * spare          空闲兜底内容
-   * search         是否显示搜索框
-   *
-   * -----------------------------------------
-   * theme          主题
-   * sz             尺寸
-   * co             颜色
-   * block          撑满
-   * ready          准备就绪
-   * type           类型
-   * tips           提示文案
-   * placeholder    内容占位
-   * maxlength      最大长度
-   * minlength      最小长度
-   * disabled       是否禁用
-   * readonly       是否只读
-   * clearable      是否显示清除按钮
-   * rules          校验规则
-   * verify         是否是示校验图标
-   * prefix         前缀内容
-   * suffix         后缀内容
-   * interacted     用户是否交互
-   */
-
-  // 类型
-  interface Props {
-    modelValue?: Array<string | number>;
-    options: Array<object>;
-    tools?: boolean;
-    spare?: string;
-
-    // Input
-    placeholder?: string;
-    rules?: Array<object>;
-    theme?: string;
-    sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
-    co?: string;
-    block?: boolean;
-    ready?: boolean;
-    type?: string;
-    tips?: string;
-    maxlength?: null | number;
-    minlength?: null | number;
-    disabled?: boolean;
-    readonly?: boolean;
-    clearable?: boolean;
-    verify?: boolean;
-    prefix?: Array<any>;
-    suffix?: Array<any>;
-    interacted?: boolean;
-  }
-  // 入参
-  const props: any = withDefaults(defineProps<Props>(), {
-    modelValue: () => [],
-    options: () => [],
-    tools: true,
-    spare: '当前没有可选项',
-
-    // Input
-    placeholder: '',
-    rules: () => [],
-    theme: '@a',
-    sz: '',
-    co: '',
-    block: true,
-    ready: false,
-    type: 'text',
-    tips: '',
-    maxlength: null,
-    minlength: null,
-    disabled: false,
-    readonly: false,
-    clearable: true,
-    verify: false,
-    prefix: () => [],
-    suffix: () => [],
-    interacted: false,
-  });
-  // 内部数据
-  const state: any = reactive({
-    name: computed(() => {
-      return Array.from({ length: 8 }, () => String.fromCharCode(97 + Math.floor(Math.random() * 26))).join('');
-    }),
-    show: 0,
-    value: '',
-    all: computed(() => {
-      return props.options?.every((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    }),
-    has: computed(() => {
-      return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    }),
-  });
-
-  // 监听外部数据
-  watch(
-    [() => props.modelValue, () => props.options],
-    ([v = [], o = []]: any = []) => {
-      const selectd: any = o?.filter((item: any) => v?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label) || [];
-      state.value = selectd.join(' Ι ') || '';
-    },
-    { deep: true, immediate: true },
-  );
-
-  // 更新
-  const change = (item: any) => {
-    emits('update:modelValue', item);
-  };
-  // 选中
-  const select = (item: any) => {
-    const s = [...props.modelValue];
-    s?.indexOf(item) !== -1 ? s?.splice(s?.indexOf(item), 1) : s?.push(item);
-    change(s);
-  };
-  // 全选
-  const allselect = () => {
-    const s = state.all ? [] : props.options?.map((item: any) => item.value);
-    change(s);
-  };
-  // 清除
-  const remove = () => {
-    change([]);
-    ipicker.value.cancel();
-  };
-</script>
-. .