@neatui/nuxt 0.1.0

package/src/components/form/InputRange.vue

@@ -0,0 +1,235 @@
+<template>
+  <div :ui-form="`${theme} sz:${sz} ${state.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`" @click="emits('click', $event)">
+    <div v-if="ready" :ui-form-tips="state.ontips">{{ state.tips }}</div>
+    <div ui-form-prefix="">
+      <template v-for="(item, idx) in prefix" :key="idx">
+        <div v-html="isObject(item) ? item.html : item"></div>
+      </template>
+      <slot name="prefix"></slot>
+    </div>
+    <slot>
+      <div ui-flex="row lm">
+        <input v-model="sta" :type="type" :placeholder="placeholder" :readonly="readonly || disabled" @focus="emits('focus', $event)" @blur="emits('blur', $event)" />
+        <span class="o-mm">⇀</span>
+        <input v-model="end" :type="type" :placeholder="placeholder" :readonly="readonly || disabled" @focus="emits('focus', $event)" @blur="emits('blur', $event)" />
+      </div>
+    </slot>
+    <div ui-form-suffix="">
+      <i ui-form-clean="" v-if="clearable && sta && !readonly && !disabled" @click.stop="fClear"></i>
+      <slot name="suffix"></slot>
+      <template v-for="(item, idx) in suffix" :key="idx">
+        <div v-html="isObject(item) ? item.html : item"></div>
+      </template>
+    </div>
+    <i v-if="ready && verify" :ui-form-verify="state.verify"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { isObject } from '@fekit/utils';
+  import { ref, watch, computed, PropType } from 'vue';
+
+  const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'clear']);
+
+  /**
+   * 入参说明
+   *
+   * modelValue     值
+   * theme          主题
+   * sz             尺寸
+   * co             颜色
+   * block          撑满
+   * ready          准备就绪
+   * type           类型
+   * tips           提示文案
+   * placeholder    内容占位
+   * maxlength      最大长度
+   * minlength      最小长度
+   * disabled       是否禁用
+   * readonly       是否只读
+   * clearable      是否显示清除按钮
+   * rules          校验规则
+   * verify         是否是示校验图标
+   * prefix         前缀内容
+   * suffix         后缀内容
+   * interacted     用户是否交互
+   */
+
+  // 类型
+  interface Props {
+    modelValue?: Array<string | number>;
+    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: () => [],
+    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 props = defineProps({
+  //   theme: { type: String, default: '@a' },
+  //   sz: { type: String, default: '' },
+  //   co: { type: String, default: '' },
+  //   block: { type: Boolean, default: true },
+  //   // 值
+  //   modelValue: {
+  //     type: Array,
+  //     default: () => []
+  //   },
+  //   // 类型
+  //   type: {
+  //     type: String,
+  //     default: 'text'
+  //   },
+  //   // 提示文案
+  //   tips: {
+  //     type: String,
+  //     default: ''
+  //   },
+  //   // 内容占位
+  //   placeholder: {
+  //     type: String,
+  //     default: ''
+  //   },
+  //   // 最大长度
+  //   maxlength: {
+  //     type: Number,
+  //     default: null
+  //   },
+  //   // 最小长度
+  //   minlength: {
+  //     type: Number,
+  //     default: null
+  //   },
+  //   // 是否禁用
+  //   disabled: {
+  //     type: Boolean,
+  //     default: false
+  //   },
+  //   // 是否中读
+  //   readonly: {
+  //     type: Boolean,
+  //     default: false
+  //   },
+  //   // 是否显示清除按钮
+  //   clearable: {
+  //     type: Boolean,
+  //     default: true
+  //   },
+  //   // 校验规则
+  //   rules: {
+  //     type: Array,
+  //     default: () => []
+  //   },
+  //   // 是否是示校验图标
+  //   verify: {
+  //     type: Boolean,
+  //     default: false
+  //   },
+  //   prefix: {
+  //     type: Array as PropType<any[]>,
+  //     default: () => []
+  //   },
+  //   suffix: {
+  //     type: Array as PropType<any[]>,
+  //     default: () => []
+  //   }
+  // });
+
+  const ready: any = ref(0);
+  const state: any = computed(() => {
+    if (ready.value) {
+      // 提示文案
+      let tips = '';
+      // 错误类型
+      let type = '';
+      // 验证结果
+      let verify = '';
+      if (props.modelValue) {
+        // 有值
+        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 sta: any = ref('');
+  const end: any = ref('');
+
+  // 清空
+  function fClear() {
+    emits('update:modelValue', []);
+    emits('clear');
+  }
+
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      sta.value = newValue[0];
+      end.value = newValue[1];
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+  watch([() => sta.value, () => end.value], () => {
+    emits('update:modelValue', [sta.value, end.value]);
+  });
+</script>

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

@@ -0,0 +1,144 @@
+<template>
+  <div :ui-form="`@a type:select ${sz ? 'sz:' + sz : ''}`">
+    <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
+      <slot>
+        <Input v-bind="$props" :clearable="false" readonly v-model="state.value" :interacted="interacted">
+          <template #suffix><i ui-form-select=""></i></template>
+        </Input>
+      </slot>
+      <template #tips>
+        <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>
+    </IFollowView>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed, watch } from 'vue';
+  import { Input } from '../form';
+  import { IFollowView } from '../basic';
+  const ifollow: any = ref(null);
+
+  const emits = defineEmits(['update:modelValue']);
+  const props: any = defineProps({
+    // 用户是否交互
+    interacted: {
+      type: Boolean,
+      default: false
+    },
+    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: () => []
+    },
+    // 校验规则
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    // 是否是示校验图标
+    verify: {
+      type: Boolean,
+      default: false
+    },
+    tools: {
+      type: Boolean,
+      default: true
+    },
+    spare: {
+      type: String,
+      default: '当前没有可选项'
+    }
+  });
+
+  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,
+    (v: any = []) => {
+      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 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([]);
+    ifollow.value.cancel();
+  };
+</script>

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

@@ -0,0 +1,195 @@
+<template>
+  <div :ui-form="`@a type:select ${sz ? 'sz:' + sz : ''}`">
+    <IFollowView ref="ifollow" 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 #tips>
+        <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.disabled" class="ux-hover nx-sm r-ss o-ms nowrap">
+              <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 nowrap" @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-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 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>
+    </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 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);
+    if (s?.indexOf(item) !== -1) {
+      s?.splice(s?.indexOf(item), 1);
+    } else {
+      s?.push(item);
+    }
+    change(s);
+  };
+  // 全选
+  const allselect = () => {
+    const s = state.all ? [] : props.options?.map((item: any) => item.value);
+    change(s);
+  };
+  // 清除
+  const remove = () => {
+    change([]);
+    ifollow.value.cancel();
+  };
+</script>
+. .

package/src/components/form/MoreSelectList.vue

@@ -0,0 +1,125 @@
+<template>
+  <ul v-if="props.options?.length" class="pr my-sm-sub">
+    <li v-if="ready" :ui-form-tips="state.ontips">{{ state.tips }}</li>
+    <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="n-sm r-ss b-solid b-xs"
+      @click.stop="select(item.value)"
+    >
+      <label ui-form="@a type:checkbox :block" style="pointer-events: none">
+        <input :checked="mv?.some((i: any) => `${i}` === `${item.value}`)" :name="field" type="checkbox" />
+        <span class="ml-sm">{{ item.label || item }}</span>
+      </label>
+    </li>
+  </ul>
+</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>