@neatui/vue 1.0.0

package/src/components/form/SelectTree/SelectTree@v1.vue

@@ -0,0 +1,227 @@
+<template>
+  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
+    <IFollowView ref="ifollow" v-model="state.show" 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.label"
+        :interacted="interacted"
+      >
+        <template #suffix><i ui-form-select=""></i></template>
+      </Input>
+      <template #tips v-if="!readonly || !disabled">
+        <div v-if="search" class="nb-sm nx-sl">
+          <Input v-model="state.search" sz="s">
+            <template #suffix>
+              <i ui-form-search="" class="co-note"></i>
+            </template>
+          </Input>
+        </div>
+        <div v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 12em">
+          <TreeView :enums="state.filter" v-model="state.value" :optional="optional" @select="select" />
+        </div>
+        <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, watch } from 'vue';
+  import { Input } from '../../form';
+  import { IFollowView } from '../../basic';
+  import { TreeView } from '../../display';
+  import { findByJson, filterJson } from '@fekit/utils';
+
+  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;
+    optional?: 'all' | 'end';
+    chain?: boolean;
+    paths?: 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,
+    optional: 'all',
+    chain: false,
+    paths: 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 state: any = reactive({
+    show: 0,
+    search: '',
+    selectd: computed(() => {
+      return findByJson(props.options, props.modelValue) || {};
+    }),
+    label: computed(() => {
+      const _item = findByJson(props.options, props.modelValue) || {};
+      return (props.chain ? _item.chain : _item.label) || '';
+    }),
+    filter: [],
+    value: ''
+  });
+  watch(
+    () => state.value,
+    (value: any) => {
+      if (value !== props.modelValue) {
+        change(value);
+      }
+    },
+    { deep: true }
+  );
+  watch(
+    [() => state.search, () => props.options],
+    () => {
+      if (state.search) {
+        state.filter = filterJson(props.options, state.search);
+      } else {
+        state.filter = props.options;
+      }
+    },
+    { deep: true, immediate: true }
+  );
+
+  const change = (value: any = '') => {
+    if (props.paths) {
+      value = findByJson(props.options, value)?.paths;
+    }
+    emits('update:modelValue', value);
+    emits('change', value);
+  };
+
+  // 选择
+  const select = (value: any = '') => {
+    change(value);
+    ifollow.value.cancel();
+  };
+  // 清空
+  const remove = () => {
+    change('');
+    ifollow.value.cancel();
+  };
+  // 取消
+  const cancel = () => {
+    ifollow.value.cancel();
+  };
+  // 显示
+  const onshow = () => {
+    emits('onshow', state.selectd);
+  };
+  // 折叠
+  const timer: any = ref(null);
+  const onhide = () => {
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      state.search = '';
+    }, 500);
+    emits('onhide', state.selectd);
+  };
+
+  defineExpose({
+    select,
+    remove,
+    change,
+    cancel
+  });
+</script>
+.. ..

package/src/components/form/Switch.vue

@@ -0,0 +1,135 @@
+<template>
+  <label ui-form="@a type:switch" class="lh-ls">
+    <input type="checkbox" name="form2" :checked="value ? true : false" />
+    <slot>&nbsp;</slot>
+  </label>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed, onMounted, PropType } from 'vue';
+
+  const props = defineProps({
+    theme: { type: String, default: '@a' },
+    sz: { type: String, default: '' },
+    co: { type: String, default: '' },
+    block: { type: Boolean, default: true },
+    // 值
+    modelValue: {
+      type: [Number, Boolean],
+      default: false
+    },
+    // 类型
+    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 value = ref(props.modelValue);
+  // 监听异步数据
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      value.value = newValue;
+    }
+  );
+
+  onMounted(() => {
+    setTimeout(() => {
+      ready.value = 1;
+    }, 300);
+  });
+</script>

package/src/components/form/TextArea.vue

@@ -0,0 +1,171 @@
+<template>
+  <div
+    :ui-form="`${theme} sz:${sz} ${state.co} type:textarea ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    @click="emits('click', $event)"
+  >
+    <div v-if="ready" :ui-form-tips="state.ontips">{{ state.tips }}</div>
+    <slot>
+      <textarea
+        :rows="rows"
+        v-model="mv"
+        :type="type"
+        :placeholder="placeholder"
+        :readonly="readonly || disabled"
+        @focus="emits('focus', $event)"
+        @input="emits('input', $event)"
+        @change="emits('change', $event)"
+        @blur="emits('blur', $event)"
+        ui-scroll=":y"
+      ></textarea>
+    </slot>
+    <i v-if="ready && verify" :ui-form-verify="state.verify"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed, onMounted, PropType } from 'vue';
+
+  const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
+  const props = defineProps({
+    theme: { type: String, default: '@a' },
+    sz: { type: String, default: '' },
+    co: { type: String, default: '' },
+    block: { type: Boolean, default: true },
+    // 值
+    modelValue: {
+      type: [String, Number],
+      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: () => []
+    },
+    rows: {
+      type: Number,
+      default: 3
+    }
+  });
+
+  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 mv: any = ref(props.modelValue);
+
+  watch(
+    () => props.modelValue,
+    (v: any) => {
+      console.log(149, v);
+      mv.value = v;
+    },
+    { deep: true, immediate: true }
+  );
+  watch(
+    () => mv.value,
+    (v: any) => {
+      let value = v;
+      if (typeof props.maxLength === 'number' && !isNaN(props.maxLength)) {
+        value = value.slice(0, props.maxLength);
+        mv.value = value;
+      }
+      emits('update:modelValue', value);
+    },
+    { deep: true }
+  );
+
+  onMounted(() => {
+    setTimeout(() => {
+      ready.value = 1;
+    }, 300);
+  });
+</script>

package/src/components/form/TimePicker.vue

@@ -0,0 +1,11 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    props?: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {});
+</script>