@neatui/nuxt 0.1.0

package/src/components/form/PageSelect.vue

@@ -0,0 +1,189 @@
+<template>
+  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
+    <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+      <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd.label" :interacted="interacted">
+        <template #suffix><i ui-form-select=""></i></template>
+      </Input>
+      <template #tips>
+        <div v-if="filterable" class="ny-sm nx-sl" style="height: 3em">
+          <div :ui-form="`@a type:input sz:s :block`">
+            <input type="text" :placeholder="props.placeholder" v-model="state.search" />
+            <div ui-form-suffix="">
+              <i ui-form-clean="" v-if="state.search" @click.stop="state.search = ''"></i>
+              <i ui-form-search="" class="co-note"></i>
+            </div>
+          </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 nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of options" :key="idx" @click="select(item)">
+            {{ item.label || item }}
+          </li>
+        </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 ui-flex="row cm" class="nx-sm">
+              <button :ui-btn="`@a s read :border :square ${state.pageInfo.page > 1 ? '' : ':disabled'}`" @click="prev"><i class="icon icon-prev"></i></button>
+              <div :ui-form="`@a type:input sz:s`" class="page-input mx-ss">
+                <input type="number" class="ac" :placeholder="props.placeholder" v-model="state.pageInfo.page" @change="pageChange" />
+              </div>
+              <button :ui-btn="`@a s read :border :square ${state.pageInfo.page < pageInfo.pages ? '' : ':disabled'}`" @click="next"><i class="icon icon-next"></i></button>
+            </div>
+            <div>
+              <button v-show="state.selectd?.value" class="co-risk" ui-btn="@a none s" @click="remove">清空</button>
+            </div>
+          </li>
+        </ul>
+      </template>
+    </IFollowView>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed, watch } from 'vue';
+  import { Input } from '.';
+  import { IFollowView } from '../basic';
+
+  const ifollow: any = ref(null);
+
+  const props = defineProps({
+    // 用户是否交互
+    interacted: {
+      type: Boolean,
+      default: false
+    },
+    theme: { type: String, default: '@a' },
+    sz: { type: String, default: 'm' },
+    co: { type: String, default: '' },
+    block: { type: Boolean, default: true },
+    // 提示文案
+    tips: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array as () => any[],
+      default: () => []
+    },
+    ui: {
+      type: Object,
+      default: () => ({ sz: 'm' })
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    // 校验规则
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    // 是否是示校验图标
+    verify: {
+      type: Boolean,
+      default: false
+    },
+    tools: {
+      type: Boolean,
+      default: true
+    },
+    spare: {
+      type: String,
+      default: '当前没有可选项'
+    },
+    // 分页
+    pageInfo: {
+      type: Object,
+      default: () => ({ total: 0, pages: 0, page: 0 })
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue', 'pageChange', 'searchChange']);
+  const change = ({ value = null }: any = {}) => {
+    emit('update:modelValue', value);
+  };
+
+  const state: any = reactive({
+    view: 1,
+    pos: 'bl',
+    show: 0,
+    search: '',
+    pageInfo: { ...props.pageInfo },
+    selectd: computed(() => {
+      let _value: any = {};
+      for (const key in props.options) {
+        if (`${props.options[key]?.value}` === `${props.modelValue}`) {
+          _value = props.options[key];
+        }
+      }
+      return _value;
+    })
+    /* filter: computed(() => {
+      if (state.search) {
+        return props.options?.filter((item) => {
+          return item.label?.includes(state.search);
+        });
+      } else {
+        return props.options;
+      }
+    }) */
+  });
+
+  // 选择
+  const select = (item: any = {}) => {
+    change(item);
+    ifollow.value.cancel();
+  };
+  // 清空
+  const remove = () => {
+    change({});
+    ifollow.value.cancel();
+  };
+  // 取消
+  const cancel = () => {
+    ifollow.value.cancel();
+  };
+
+  const prev = () => {
+    if (state.pageInfo.page > 1) state.pageInfo.page--;
+  };
+  const next = () => {
+    if (state.pageInfo.page < props.pageInfo.pages) state.pageInfo.page++;
+  };
+  const pageChange = ({ target }: any) => {
+    const p = Number(target.value);
+    state.pageInfo.page = p <= 0 ? 0 : p > props.pageInfo.pages ? props.pageInfo.pages : state.pageInfo.page;
+    emit('pageChange', state.pageInfo);
+  };
+
+  watch(
+    () => state.search,
+    () => {
+      change({});
+      emit('searchChange', state.search);
+    }
+  );
+
+  defineExpose({
+    select,
+    remove,
+    change,
+    cancel
+  });
+</script>
+<style lang="scss" scoped>
+  .page-input {
+    width: 2.5em !important;
+    min-width: 2.5em !important;
+  }
+</style>
+../basic . .

package/src/components/form/SearchMoreSelect.vue

@@ -0,0 +1,173 @@
+<template>
+  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
+    <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+      <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd" @click="toggle" :interacted="interacted">
+        <template #suffix><i ui-form-select=""></i></template>
+      </Input>
+      <template #tips>
+        <div class="ny-sm nx-sl" style="height: 3em">
+          <div :ui-form="`@a type:input sz:s :block`">
+            <input type="text" :placeholder="props.placeholder" v-model="state.search" />
+            <div ui-form-suffix="">
+              <i ui-form-clean="" v-if="state.search" @click.stop="state.search = ''"></i>
+              <i ui-form-search="" class="co-note"></i>
+            </div>
+          </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 nowrap" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
+            <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
+              <span class="ml-sm">{{ item.label || item }}</span>
+            </label>
+          </li>
+        </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 nowrap co-main" @click.stop="allselect()">
+              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+                <input type="checkbox" :name="formName" :checked="state.all" />
+                <span class="ml-sm">全选({{ state.filter?.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>
+    </IFollowView>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed } from 'vue';
+  import { Input } from '.';
+  import { IFollowView } from '../basic';
+  const ifollow: any = ref(null);
+
+  const emits = defineEmits(['update:modelValue', 'change', 'request', 'onshow', 'onhide']);
+
+  const props = defineProps({
+    // 用户是否交互
+    interacted: {
+      type: Boolean,
+      default: false
+    },
+    theme: { type: String, default: '@a' },
+    sz: { type: String, default: 'm' },
+    co: { type: String, default: '' },
+    block: { type: Boolean, default: true },
+    // 提示文案
+    tips: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    modelValue: {
+      type: Array as () => any[],
+      default: () => []
+    },
+    options: {
+      type: Array as () => any[],
+      default: () => []
+    },
+    ui: {
+      type: Object,
+      default: () => ({ sz: 'm' })
+    },
+    // 校验规则
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    // 是否是示校验图标
+    verify: {
+      type: Boolean,
+      default: false
+    },
+    tools: {
+      type: Boolean,
+      default: true
+    },
+    spare: {
+      type: String,
+      default: '当前没有可选项'
+    }
+  });
+  const formName = new Date().getTime().toString();
+
+  const change = (item: any) => {
+    emits('update:modelValue', item);
+  };
+
+  const state: any = reactive({
+    view: 1,
+    pos: 'bl',
+    show: 0,
+    search: '',
+    selectd: computed(() => {
+      const result = props.options?.filter((item) => props.modelValue?.some((i: any) => `${i}` == `${item.value}`))?.map((item) => item.label);
+      return result?.join(' Ι ');
+    }),
+    filter: computed(() => {
+      if (state.search) {
+        return props.options?.filter((item) => {
+          return item.label?.includes(state.search);
+        });
+      } else {
+        return props.options;
+      }
+    }),
+    all: computed(() => {
+      return state.filter?.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}`));
+    })
+  });
+
+  const toggle = () => {
+    state.show = state.show ? 0 : 1;
+  };
+  // 选中
+  const select = (item: any) => {
+    const values = [...props.modelValue];
+    // values?.indexOf(item) !== -1 ? values?.splice(values?.indexOf(item), 1) : values?.push(item);
+    if (values?.indexOf(item) !== -1) {
+      values?.splice(values?.indexOf(item), 1);
+    } else {
+      values?.push(item);
+    }
+    change(values);
+  };
+  // 清除
+  const remove = () => {
+    change([]);
+    ifollow.value.cancel();
+  };
+
+  // 显示
+  const onshow = () => {
+    emits('onshow', state.selectd);
+  };
+  // 折叠
+  const onhide = () => {
+    state.search = '';
+    emits('onhide', state.selectd);
+  };
+
+  const allselect = () => {
+    let values = [];
+    if (!state.all) {
+      values = state.filter?.map((item: any) => item.value);
+    }
+    change(values);
+  };
+</script>
+. .

package/src/components/form/SearchSelect.vue.backup

@@ -0,0 +1,194 @@
+<template>
+  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
+    <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+      <Input
+        v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
+        v-model="state.selectd.label"
+        :interacted="interacted"
+      >
+        <template #suffix><i ui-form-select=""></i></template>
+      </Input>
+      <template #tips v-if="!readonly || !disabled">
+        <div v-if="search" class="ny-sm nx-sl">
+          <Input v-model="state.search" sz="s">
+            <template #suffix>
+              <i ui-form-search="" class="co-note"></i>
+            </template>
+          </Input>
+        </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 nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of state.filter" :key="idx" @click="select(item)">
+            {{ item.label || item }}
+          </li>
+        </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="co-main">
+              <p class="nx-sm r-ss nowrap">
+                <span>{{ state.filter?.length || 0 }}个可选项</span>
+              </p>
+            </div>
+            <div>
+              <button v-show="state.selectd?.value" class="co-risk" ui-btn="@a none s" @click="remove">清空</button>
+            </div>
+          </li>
+        </ul>
+      </template>
+    </IFollowView>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed } from 'vue';
+  import { Input } from '../form';
+  import { IFollowView } from '../basic';
+  const ifollow: any = ref(null);
+
+  const emits = defineEmits(['update:modelValue', 'change', 'onshow', 'onhide']);
+
+  /**
+   * 入参说明
+   * modelValue     值
+   * options        枚举列表
+   * tools          是否显示工具栏
+   * spare          空闲兜底内容
+   * search         是否启用搜索框
+   * pagination     是否启用分页
+   * refresh        是否显示刷新
+   *
+   * ---------------------------
+   * theme          主题
+   * sz             尺寸
+   * co             颜色
+   * block          撑满
+   * ready          准备就绪
+   * type           类型
+   * tips           提示文案
+   * placeholder    内容占位
+   * maxlength      最大长度
+   * minlength      最小长度
+   * disabled       是否禁用
+   * readonly       是否只读
+   * clearable      是否显示清除按钮
+   * rules          校验规则
+   * verify         是否是示校验图标
+   * prefix         前缀内容
+   * suffix         后缀内容
+   * interacted     用户是否交互
+   */
+
+  // 类型
+  interface Props {
+    modelValue?: string | number;
+    options: Array<object>;
+    tools?: boolean;
+    spare?: string;
+    search?: boolean;
+    pagination?: boolean;
+    refresh?: boolean;
+
+    // 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: '当前没有可选项',
+    search: true,
+    pagination: false,
+    refresh: false,
+
+    // INPUT
+    placeholder: '',
+    rules: () => [],
+    theme: '@a',
+    sz: '',
+    co: '',
+    block: true,
+    ready: false,
+    type: 'text',
+    tips: '',
+    maxlength: null,
+    minlength: null,
+    disabled: false,
+    readonly: false,
+    clearable: false,
+    verify: false,
+    prefix: () => [],
+    suffix: () => [],
+    interacted: false
+  });
+
+  const change = ({ value = '' }: any = {}) => {
+    emits('update:modelValue', value);
+    emits('change', value);
+  };
+
+  const state = reactive({
+    show: 0,
+    search: '',
+    selectd: computed(() => {
+      return props.options.find((option: any) => `${option.value}` === `${props.modelValue}`) || {};
+    }),
+    filter: computed(() => {
+      if (state.search) {
+        return props.options?.filter((item: any) => {
+          return item.label?.includes(state.search);
+        });
+      } else {
+        return props.options;
+      }
+    })
+  });
+  // 选择
+  const select = (item: any = {}) => {
+    change(item);
+    ifollow.value.cancel();
+  };
+  // 清空
+  const remove = () => {
+    change({});
+    ifollow.value.cancel();
+  };
+  // 取消
+  const cancel = () => {
+    ifollow.value.cancel();
+  };
+  // 显示
+  const onshow = () => {
+    emits('onshow', state.selectd);
+  };
+  // 折叠
+  const onhide = () => {
+    emits('onhide', state.selectd);
+  };
+
+  defineExpose({
+    select,
+    remove,
+    change,
+    cancel
+  });
+</script>