@neatui/vue 2.17.1 → 2.17.3

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

@@ -1,230 +0,0 @@
-<template>
-  <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
-    @click="emits('click', $event)"
-  >
-    <div :ui-form-tips="state.error.ontips">{{ state.error.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>
-      <input
-        v-model="state.value"
-        :type="type"
-        :placeholder="placeholder"
-        :readonly="readonly || disabled"
-        autocomplete="new-password"
-        @focus="emits('focus', $event, state)"
-        @input="input($event)"
-        @change="emits('change', $event, state)"
-        @blur="blur($event)"
-      />
-    </slot>
-    <div ui-form-suffix="">
-      <i ui-form-clean="" v-if="clearable && state.value && !readonly && !disabled" @click.stop="clear"></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="verify"></i>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { reactive, watch } from 'vue';
-  import { isObject } from '@fekit/utils';
-
-  const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
-
-  /**
-   * 入参说明
-   *
-   * modelValue     值
-   * theme          主题
-   * sz             尺寸
-   * co             颜色
-   * block          撑满
-   * ready          准备就绪
-   * type           类型
-   * tips           提示文案
-   * placeholder    内容占位
-   * maxlength      最大长度
-   * minlength      最小长度
-   * disabled       是否禁用
-   * readonly       是否只读
-   * clearable      是否显示清除按钮
-   * rules          校验规则
-   * verify         是否是示校验图标
-   * prefix         前缀内容
-   * suffix         后缀内容
-   * interacted     用户是否交互
-   */
-
-  // 类型
-  interface Props {
-    modelValue?: 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 state: any = reactive({
-    // 用户是否交互
-    interacted: false,
-    // 值
-    value: props.modelValue,
-    // 错误
-    error: {}
-  });
-  // 外部传入交互标识，主要用于外部没有输入但点击了提交
-  watch(
-    () => props.interacted,
-    (interacted: any) => {
-      if (interacted) {
-        state.interacted = interacted;
-      }
-    },
-    { deep: true, immediate: true }
-  );
-
-  // 监听异步数据
-  watch(
-    () => props.modelValue,
-    (value: any) => {
-      if (state.value !== value) {
-        state.value = value;
-      }
-    },
-    { deep: true, immediate: true }
-  );
-  watch(
-    () => state.value,
-    (value: any) => {
-      emits('update:modelValue', value);
-    },
-    { deep: true, immediate: true }
-  );
-
-  // 校验
-  watch(
-    [() => state.interacted, () => state.value],
-    async () => {
-      if (state.interacted) {
-        // 提示文案
-        let tips = '';
-        // 错误类型
-        let type = '';
-        // 验证结果
-        let verify = '';
-
-        if (props.modelValue) {
-          // 有值
-          let hasError = false;
-          // 遍历校验规则
-          for (const rule of props.rules) {
-            if (rule && rule.validator) {
-              const yes = !(await rule.validator(props.modelValue));
-              if (yes) {
-                tips = rule.msg;
-                type = rule.type;
-                hasError = true;
-                break;
-              }
-            }
-          }
-          verify = hasError ? 'no' : 'ok';
-        } else {
-          // 无值
-          let hasError = false;
-          // 遍历校验规则
-          for (const rule of props.rules) {
-            if (rule) {
-              tips = rule.msg;
-              type = rule.type;
-              if (rule.required) {
-                hasError = true;
-                break;
-              }
-            }
-          }
-          verify = hasError ? 'no' : '';
-        }
-        if (verify !== 'no' && props.tips) {
-          tips = props.tips;
-        }
-        // 是否显示提示
-        const ontips = (verify === 'no' && tips) || props.tips ? 'show' : '';
-        // 状态颜色
-        const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
-        state.error = { tips, ontips, verify, co };
-      } else {
-        state.error = { tips: props.tips, ontips: props.tips ? 'show' : '', verify: '', co: '' };
-      }
-    },
-    { deep: true, immediate: true }
-  );
-
-  // 清空
-  function clear() {
-    emits('update:modelValue', '');
-    emits('clear');
-  }
-  // 输入
-  const input = (e: any) => {
-    if (!state.interacted) {
-      setTimeout(() => {
-        state.interacted = true;
-      }, 50);
-    }
-    emits('input', e, state);
-  };
-  // 失焦
-  const blur = (e: any) => {
-    if (!state.interacted) {
-      setTimeout(() => {
-        state.interacted = true;
-      }, 50);
-    }
-    emits('blur', e, state);
-  };
-</script>

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

@@ -1,144 +0,0 @@
-<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/SearchSelect.vue.backup

@@ -1,194 +0,0 @@
-<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>