@neatui/nuxt 0.1.0

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

@@ -0,0 +1,202 @@
+<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-sl" style="min-width: 100%; max-height: 16em">
+          <li
+            class="ux-hover nx-sm ny-ss 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 '.';
+  import { IFollowView } from '../basic';
+  const ifollow: any = ref(null);
+  console.warn('「SearchSelect」 即将废弃，建议使用「Select」 设置参数search为true，示例：<Select v-model="value" :search="true" />');
+  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 = () => {
+    state.search = '';
+    emits('onhide', state.selectd);
+  };
+
+  defineExpose({
+    select,
+    remove,
+    change,
+    cancel
+  });
+</script>
+. .

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

@@ -0,0 +1,201 @@
+<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-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 nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''">
+              <del>{{ item.label || item }}</del>
+            </li>
+            <li v-else class="ux-hover nx-sm ny-ss r-ss nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''" @click="select(item)">
+              <span>{{ item.label || item }}</span>
+            </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="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 '.';
+  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: false,
+    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 = () => {
+    state.search = '';
+    emits('onhide', state.selectd);
+  };
+
+  defineExpose({
+    select,
+    remove,
+    change,
+    cancel
+  });
+</script>
+. .

package/src/components/form/SelectList.vue

@@ -0,0 +1,58 @@
+<template>
+  <ul v-if="props.options?.length" class="my-sm-sub lh-ss">
+    <li
+      class="hover:bg-main-ss n-sl r-ss b-solid b-xs"
+      :class="`${item.value === mv ? 'bk-main-ml bg-main-ss' : 'bk-case'}`"
+      v-for="(item, idx) of props.options"
+      :key="idx"
+      @click="mv = item.value === mv ? '' : item.value"
+    >
+      <label ui-form="@a type:radio" style="pointer-events: none">
+        <input type="radio" :name="field" :data-name="field" :checked="item.value === mv" /><span class="lh-ss">{{ item.label || item }}</span>
+      </label>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+  import { watch, ref } from 'vue';
+  const emits = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    field: { type: String, default: '' },
+    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: () => []
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    }
+  });
+
+  // eslint-disable-next-line vue/no-dupe-keys
+  const field: any = Math.random().toString(36).substring(2, 12);
+  // 内部数据
+  const mv: any = ref(props.modelValue);
+  watch(
+    () => props.modelValue,
+    (value: any) => {
+      mv.value = value;
+    }
+  );
+  watch(
+    () => mv.value,
+    (value: any) => {
+      emits('update:modelValue', value);
+    }
+  );
+</script>

package/src/components/form/SelectPicker.vue

@@ -0,0 +1,97 @@
+<template>
+  <div :ui-form="`@a type:select sz:${sz}`" ref="dom">
+    <IPickerView ref="ipicker">
+      <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd.label">
+        <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="select">确定</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 b-solid bk-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click="mv = item.value">
+                  <label ui-form="@a type:radio">
+                    <input type="radio" :name="item.field" :checked="item.value === mv" /><span>{{ item.label || item }}</span>
+                  </label>
+                </li>
+              </ul>
+            </IScrollView>
+          </div>
+        </div>
+      </template>
+    </IPickerView>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed } from 'vue';
+  import { Input } from '.';
+  import { IPickerView, IScrollView } from '../basic';
+  import { watch } from 'vue';
+  const ipicker: any = ref(null);
+  const emits = defineEmits(['update:modelValue']);
+  const props = 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: '' },
+    options: {
+      type: Array as () => any[],
+      default: () => []
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    }
+  });
+  // 内部数据
+  const mv: any = ref(props.modelValue);
+  watch(
+    () => props.modelValue,
+    (v: any) => {
+      mv.value = v;
+    },
+    { deep: true, immediate: true }
+  );
+  const state = reactive({
+    view: 0,
+    show: 0,
+    selectd: computed(() => {
+      let _value: any = {};
+      for (const key in props.options) {
+        if (`${props.options[key]?.value}` === `${props.modelValue}`) {
+          _value = props.options[key];
+        }
+      }
+      return _value;
+    })
+  });
+  // 更新
+  const change = ({ value = null }: any = {}) => {
+    emits('update:modelValue', value);
+  };
+  // 选定
+  const select = () => {
+    change(mv);
+    ipicker.value?.hide();
+  };
+  // 清空
+  const remove = () => {
+    mv.value = '';
+  };
+  // 取消
+  const cancel = () => {
+    ipicker.value?.hide();
+  };
+</script>
+. .

package/src/components/form/SelectTags.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="props.options?.length" class="mr-sm-sub mb-sm-sub">
+    <span
+      class="lh-ss ny-sm nx-ms r-xl dib"
+      :class="`${mv == item.value ? 'bg-main-sm co-main' : 'bg-weak'}`"
+      v-for="(item, idx) of props.options"
+      :key="idx"
+      @click="mv = item.value === mv ? '' : item.value"
+    >
+      {{ item.label || item }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { watch, ref } from 'vue';
+  const emits = defineEmits(['update:modelValue']);
+  const props = 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: '' },
+    options: {
+      type: Array as () => any[],
+      default: () => []
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    }
+  });
+  // 内部数据
+  const mv: any = ref(props.modelValue);
+  watch(
+    () => props.modelValue,
+    (value: any) => {
+      mv.value = value;
+    }
+  );
+  watch(
+    () => mv.value,
+    (value: any) => {
+      emits('update:modelValue', value);
+    }
+  );
+</script>