@neatui/nuxt 0.1.0

package/src/components/form/MoreSelectPanel@v3.vue

@@ -0,0 +1,190 @@
+<template>
+  <div :ui-form="`@a 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="@a 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="@a 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 nowrap co-main" @click.stop="allselect()">
+              <label style="pointer-events: none" ui-form="@a 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 '.';
+  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>
+. .

package/src/components/form/MoreSelectPicker.vue

@@ -0,0 +1,124 @@
+<template>
+  <div :ui-form="`@a type:select sz:${sz}`" ref="dom">
+    <IPickerView ref="ipicker">
+      <Input v-bind="$props" :clearable="false" readonly v-model="state.value">
+        <template #suffix><i ui-form-select=""></i></template>
+      </Input>
+      <template #options>
+        <div class="full n-xs" ui-flex="col xy">
+          <div class="flex-fixed n-ms b-solid bk-line bb-xs" ui-flex="row xm">
+            <div><button class="co-note" @click="cancel">取消</button></div>
+            <div><button class="co-main" @click="confirm">确定</button></div>
+          </div>
+          <div class="flex-block">
+            <IScrollView class="full n-ms" :pull="false" :load="false">
+              <ul v-if="props.options?.length" class="my-sm-sub">
+                <li class="ux-hover n-sm r-ss nowrap b-solid bk-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
+                  <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+                    <input type="checkbox" :name="field" :checked="mv?.some((i: any) => `${i}` === `${item.value}`)" />
+                    <span class="ml-sm">{{ item.label || item }}</span>
+                  </label>
+                </li>
+              </ul>
+            </IScrollView>
+          </div>
+        </div>
+      </template>
+    </IPickerView>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed, watch } from 'vue';
+  import { Input } from '.';
+  import { IPickerView, IScrollView } from '../basic';
+  const ipicker: any = ref(null);
+  const emits = defineEmits(['update:modelValue']);
+  const props: any = defineProps({
+    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: () => []
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    field: {
+      type: String,
+      default: () => {
+        const _name = (l: any) => Array.from({ length: l }, () => 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)]).join('');
+        return _name(8);
+      }
+    }
+  });
+  const mv: any = ref(props.modelValue);
+  const state: any = reactive({
+    view: 0,
+    value: '',
+    // selectd: computed(() => {
+    //   const result = props.options?.filter((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label);
+    //   return result.join(' Ι ');
+    // }),
+    selectd: [],
+    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,
+    (v: any = []) => {
+      mv.value = v;
+      const selectd: any = props.options?.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 values = [...mv.value];
+    // 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);
+    }
+    mv.value = values;
+  };
+  // 清除
+  // const remove = () => {
+  //   mv.value = [];
+  // };
+  // 确定
+  const confirm = () => {
+    change(mv.value);
+    if (ipicker.value) {
+      ipicker.value.hide();
+    }
+  };
+  // 取消
+  const cancel = () => {
+    if (ipicker.value) {
+      ipicker.value.hide();
+    }
+  };
+</script>
+. .

package/src/components/form/MoreSelectTags.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <p v-if="ready" :ui-form-tips="state.ontips">{{ state.tips }}</p>
+    <ul v-if="props.options?.length" class="pr mr-sm-sub mb-sm-sub dib-sub">
+      <li
+        v-for="(item, idx) of props.options"
+        :key="idx"
+        :class="`${mv?.some((i: any) => `${i}` === `${item.value}`) ? 'bg-main-ss bk-main-ml' : 'bk-case'}`"
+        class="nx-ms ny-ss r-sm b-solid b-xs pr"
+        @click.stop="select(item.value)"
+      >
+        <span>{{ item.label || item }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, computed, onMounted } from 'vue';
+
+  const emits = defineEmits(['update:modelValue']);
+  const props: any = defineProps({
+    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: () => []
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    field: {
+      type: String,
+      default: () => {
+        const _name = (l: any) => Array.from({ length: l }, () => 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)]).join('');
+        return _name(8);
+      }
+    }
+  });
+
+  const mv: any = ref(props.modelValue);
+
+  const state: any = computed(() => {
+    if (ready.value) {
+      // 提示文案
+      let tips = '';
+      // 错误类型
+      let type = '';
+      // 验证结果
+      let verify = '';
+      if (mv.value) {
+        // 有值
+        const res: any = props.rules?.some((rule: any) => {
+          const yes = rule.validator && !rule.validator(props.modelValue);
+          tips = rule.msg;
+          type = rule.type;
+          return yes;
+        });
+        verify = res ? 'no' : 'ok';
+      } else {
+        // 无值
+        const res: any = props.rules?.some((rule: any) => {
+          tips = rule.msg;
+          type = rule.type;
+          return rule.required;
+        });
+        verify = res ? 'no' : '';
+      }
+      if (verify !== 'no' && props.tips) {
+        tips = props.tips;
+      }
+      // 是否显示提示
+      const ontips = verify === 'no' && tips ? 'show' : '';
+      // 状态颜色
+      const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
+      return { tips, ontips, verify, co };
+    } else {
+      return {};
+    }
+  });
+
+  // 选中
+  const select = (item: any) => {
+    const values = [...mv.value];
+    // 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);
+    }
+    mv.value = values;
+  };
+
+  watch(
+    () => props.modelValue,
+    () => {
+      mv.value = props.modelValue;
+    },
+    { deep: true, immediate: true }
+  );
+  watch(
+    () => mv.value,
+    (v: any) => {
+      emits('update:modelValue', v);
+    },
+    { deep: true, immediate: true }
+  );
+
+  const ready: any = ref(0);
+  onMounted(() => {
+    setTimeout(() => {
+      ready.value = 1;
+    }, 300);
+  });
+</script>

package/src/components/form/PageMoreSelect.vue

@@ -0,0 +1,187 @@
+<template>
+  <div :ui-form="`@a type:select ${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
+    <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+      <slot>
+        <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd">
+          <template #suffix><i ui-form-select=""></i></template>
+        </Input>
+      </slot>
+      <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-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 props.options" :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">全选({{ props.options?.length || 0 }})</span> -->
+                <span class="ml-sm">全选</span>
+              </label>
+            </div>
+            <div ui-flex="row cm" class="nx-sm">
+              <button :ui-btn="`@a xs read :border :square ${state.pageInfo.page > 1 ? '' : ':disabled'}`" @click="prev"><i class="icon icon-prev"></i></button>
+              <div :ui-form="`@a type:input sz:xs`" 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 xs read :border :square ${state.pageInfo.page < pageInfo.pages ? '' : ':disabled'}`" @click="next"><i class="icon icon-next"></i></button>
+            </div>
+            <div v-show="state.has">
+              <button 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: any = defineProps({
+    theme: { type: String, default: '@a' },
+    sz: { type: String, default: '' },
+    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: '当前没有可选项'
+    },
+    // 分页
+    pageInfo: {
+      type: Object,
+      default: () => ({ total: 0, pages: 0, page: 0 })
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    }
+  });
+
+  const formName = new Date().getTime().toString();
+
+  const emit = defineEmits(['update:modelValue', 'pageChange', 'searchChange']);
+
+  const change = (item: any) => {
+    emit('update:modelValue', item);
+  };
+
+  const state: any = reactive({
+    view: 1,
+    pos: 'bl',
+    show: 0,
+    search: '',
+    pageInfo: { ...props.pageInfo },
+    selectd: computed(() => {
+      const result = props.options?.filter((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label);
+      return result.join(' Ι ');
+    }),
+    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}`));
+    })
+  });
+
+  // 选中
+  const select = (item: any) => {
+    const values = [...props.modelValue];
+    values?.indexOf(item) !== -1 ? values?.splice(values?.indexOf(item), 1) : values?.push(item);
+    change(values);
+  };
+  // 清除
+  const remove = () => {
+    change([]);
+    ifollow.value.cancel();
+  };
+  const allselect = () => {
+    let values = [];
+    if (!state.all) {
+      values = props.options?.map((item: any) => item.value);
+    }
+    change(values);
+  };
+
+  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);
+    }
+  );
+</script>
+<style lang="scss" scoped>
+  .page-input {
+    width: 2em !important;
+    min-width: 2em !important;
+  }
+</style>
+../basic . .