Pagination

Signed-off-by: Tenny <tenny.shu@foxmail.com>

Author: Tenny

docs/components/form.md

@@ -136,6 +136,20 @@
   </CodePreview>
 </ClientOnly>
 
+### 只使用 FormItem
+
+`FormItem` 可以不放在 `Form` 里面，从而进行单独使用。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-form-item label="开关">
+    <nt-switch />
+  </nt-form-item>
+  </textarea>
+  </CodePreview>
+</ClientOnly>`
+
 ## API
 
 ### Form Props

docs/components/input.md

@@ -4,6 +4,25 @@
 
 ## 基础用法
 
+<script setup lang="ts">
+  import { Input } from '../../src'
+  import { ref } from 'vue'
+
+  const inputInt = ref('')
+
+  function numericParse(value: string) {
+    let val = parseInt(value, 10)
+    if (Number.isNaN(val)) {
+      val = ''
+    } else {
+      val = Math.abs(val)
+    }
+    return String(val);
+  }
+</script>
+
+### 基本使用
+
 文本输入的基础用法。
 
 <ClientOnly><CodePreview>
@@ -12,6 +31,39 @@
 </textarea>
 </CodePreview></ClientOnly>
 
+### 输入解析
+
+通过传递 `parser` 在接受到输入值的时候进行解析，例如：只允许输入正整数
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup lang="ts">
+    import { Input } from '../../src';
+    import { ref } from 'vue';
+    //-
+    const inputInt = ref('')
+    //-
+    function numericParse(value: string) {
+      let val = parseInt(value, 10)
+      if (Number.isNaN(val)) {
+        val = ''
+      } else {
+        val = Math.abs(val)
+      }
+      return String(val);
+    }
+  </script>
+  <template>
+    <nt-input v-model="inputInt" placeholder="请输入正整数" :parser="numericParse"></nt-input>
+  </template>
+  </textarea>
+  <template #preview>
+    <Input v-model="inputInt" placeholder="请输入正整数" :parser="numericParse" />
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Input Props
@@ -22,6 +74,7 @@
 | `html-type` | 原始的 [type](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#input_%E7%B1%BB%E5%9E%8B) | `string` | `text` |
 | `model-value` / `v-model` | 绑定值  | `string` | — |
 | `placeholder` | 占位文本 | `string` | — |
+| `parser` | 输入时解析值 | `(value: string) => string` | — |
 
 ### Input Exposes
 

docs/components/pagination.md

@@ -5,8 +5,10 @@
 ## 演示
 
 <script setup>
-  import { Pagination } from "../../src"
+  import { Pagination, Switch, FormItem } from "../../src"
   import { ref, watch } from 'vue'
+
+  const singleHide = ref(false)
 </script>
 
 ### 基础用法
@@ -54,6 +56,34 @@
   </CodePreview>
 </ClientOnly>
 
+### 单页隐藏
+
+当只有一页时，通过 `single-hide` 配置隐藏分页
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup lang="ts">
+    const singleHide = ref(false)
+  </script>
+  <template>
+    <nt-form-item label="单页隐藏">
+      <nt-switch v-model="singleHide" />
+    </nt-form-item>
+    <hr />
+    <nt-pagination :page-count="1" :hide-on-single-page="singleHide"></nt-pagination>
+  </template>
+  </textarea>
+  <template #preview>
+    <FormItem label="单页隐藏">
+      <Switch v-model="singleHide" />
+    </FormItem>
+    <hr />
+    <Pagination :page-count="1" :hide-on-single-page="singleHide"></Pagination>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Pagination Props

src/components/Input.vue

@@ -1,30 +1,29 @@
 <template>
   <input
-    :value="model"
+    :value="modelValue"
     :type="htmlType"
     :class="{
       'nt-input': true,
       'is-autosize': autosize,
     }"
     :placeholder="placeholder"
-    @input="
-      $emit('update:modelValue', ($event.target as HTMLInputElement).value)
-    "
+    @input="handleInput"
     ref="el"
   />
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-const model = defineModel();
+import { ref } from 'vue';
 
 const el = ref<HTMLInputElement>();
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     htmlType?: string;
     placeholder?: string;
     autosize?: boolean;
+    parser?: (value: string) => string;
+    modelValue?: string;
   }>(),
   {
     htmlType: 'text',
@@ -33,12 +32,24 @@ withDefaults(
   },
 );
 
+const emits = defineEmits(['update:modelValue']);
+
 function focus() {
   if (el.value != null) {
     el.value.focus();
   }
 }
 
+function handleInput(e: Event) {
+  const $target = e.target as HTMLInputElement;
+  let value = $target.value;
+  if (props.parser != null) {
+    value = props.parser(value) as string;
+    $target.value = String(value);
+  }
+  emits('update:modelValue', value);
+}
+
 defineExpose({
   focus,
 });

src/components/Pagination.vue

@@ -1,5 +1,8 @@
 <template>
-  <ul :class="['nt-pagination', `nt-pagination-${align}`]">
+  <ul
+    :class="['nt-pagination', `nt-pagination-${align}`]"
+    v-if="!hideOnSinglePage || totalPage > 1"
+  >
     <!-- 上一页切换按钮 -->
     <li class="nt-pagination-item">
       <Button
@@ -98,11 +101,14 @@ const props = withDefaults(
     defaultCurrentPage?: number;
     /** 对齐方式 */
     align?: 'start' | 'center' | 'end';
+    /** 只有一页时是否隐藏分页器 */
+    hideOnSinglePage?: boolean;
   }>(),
   {
     pageSize: 10,
     defaultCurrentPage: 1,
     align: 'start',
+    hideOnSinglePage: false,
   },
 );
 

style/form/index.css

@@ -1,15 +1,17 @@
 .nt-form-item {
   display: flex;
-  margin-bottom: 20px;
+
   font-size: 14px;
 }
 .nt-form-item__label {
+  --nt-form-label-width: auto;
+  --nt-form-edit-height: auto;
   display: inline-flex;
   align-items: flex-start;
   justify-content: flex-end;
-  width: var(--nt-form-label-width, 80px);
-  height: var(--nt-form-edit-height, 32px);
-  line-height: var(--nt-form-edit-height, 32px);
+  width: var(--nt-form-label-width);
+  height: var(--nt-form-edit-height);
+  line-height: var(--nt-form-edit-height);
   color: #606266;
   padding: 0 10px 0 0;
 }
@@ -21,6 +23,8 @@
 .nt-form-item__content {
   flex: 1;
   position: relative;
+  display: flex;
+  align-items: center;
 }
 .nt-form-item__error {
   font-size: 12px;
@@ -38,6 +42,14 @@
   width: 100%;
 }
 
+.nt-form .nt-form-item {
+  margin-bottom: 20px;
+}
+.nt-form .nt-form-item__label {
+  --nt-form-label-width: 80px;
+  --nt-form-edit-height: 32px;
+}
+
 /** 行内表单 */
 .nt-form-inline .nt-form-item {
   display: inline-flex;

style/switch/index.css

@@ -1,5 +1,5 @@
 .nt-switch {
-  --nt-switch-height: 20px;
+  --nt-switch-height: 22px;
   --nt-switch-width: calc(var(--nt-switch-height) * 2);
   display: inline-flex;
   width: var(--nt-switch-width);
@@ -15,9 +15,6 @@
   vertical-align: middle;
 }
 
-.nt-switch:hover {
-  background-color: var(--nt-primary-color-light1, #d9f7be);
-}
 .nt-switch--checked {
   background-color: var(--nt-primary-color, #52c41a);
 }