docs(button-edit): add button-edit features

packages/ui-vue/components/button-edit/src/composition/use-text-box.ts

@@ -11,7 +11,7 @@ export function useTextBox(props: ButtonEditProps, context: SetupContext, modelV
 
     let focusState = false;
 
-    const hasFocusedTextBox = computed(() => focusState);
+    const hasFocusedTextBox = computed(() => !props.disable && focusState);
 
     const textBoxClass = computed(() => ({
         'text-left': props.textAlign === 'left',
@@ -48,6 +48,7 @@ export function useTextBox(props: ButtonEditProps, context: SetupContext, modelV
 
     function onFocusTextBox($event: Event) {
         if (props.disable) {
+            focusState = true;
             return;
         }
         focusState = true;

packages/ui-vue/components/switch/index.ts

@@ -3,6 +3,8 @@ import Switch from './src/switch.component';
 
 export * from './src/switch.props';
 
+export { Switch };
+
 export default {
     install(app: App): void {
         app.component(Switch.name, Switch);

packages/ui-vue/docs/.vitepress/theme/index.ts

@@ -1,5 +1,6 @@
 // import farris from '../../../components/index';
-import buttonEdit from '../../../components/button-edit';
+import ButtonEdit from '../../../components/button-edit';
+import Switch from '../../../components/switch';
 import DefaultTheme from 'vitepress/theme';
 import 'vitepress-theme-demoblock/theme/styles/index.css';
 import { registerComponents } from './register-components.js';
@@ -9,7 +10,7 @@ import '../../../public/assets/farris-all.css';
 export default {
     ...DefaultTheme,
     enhanceApp({ app }) {
-        app.use(buttonEdit);
+        app.use(ButtonEdit).use(Switch);
         registerComponents(app);
     }
 };

packages/ui-vue/docs/components/button-edit/index.md

@@ -12,11 +12,11 @@ import { ref } from 'vue';
 const text = ref('');
 </script>
 <template>
-    <f-button-edit v-model="text"></f-button-edit>
-    <div style="margin-top:1rem">
+    <div class="my-2">
         <span>输入框文本: </span>
         <span>{{ text }}</span>
     </div>
+    <f-button-edit v-model="text"></f-button-edit>
 </template>
 ```
 
@@ -26,10 +26,69 @@ const text = ref('');
 
 ## 状态
 
+:::demo
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+const text = ref('Button Edit 按钮输入框');
+const editable = ref(false);
+const disable = ref(true);
+const readonly = ref(true);
+</script>
+<template>
+    <div class="my-2">
+        <span>默认状态: </span>
+    </div>
+    <f-button-edit v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>只读状态: </span>
+    </div>
+    <f-button-edit :readonly="readonly" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>不可编辑状态: </span>
+    </div>
+    <f-button-edit :editable="editable" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>禁用状态: </span>
+    </div>
+    <f-button-edit :disable="disable" v-model="text"></f-button-edit>
+</template>
+```
+
+:::
+
 ## 按钮
 
 ## 清空按钮
 
+:::demo 使用清空按钮可以快速置空文本框。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+const text = ref('Button Edit 按钮输入框');
+const enableClear = ref(true);
+</script>
+<template>
+    <div class="my-2">
+        <span>默认状态: </span>
+        <f-switch v-model="enableClear"></f-switch>
+    </div>
+    <f-button-edit :enable-clear="enableClear" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>只读状态: </span>
+    </div>
+    <f-button-edit :enable-clear="enableClear" readonly v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>禁用状态: </span>
+    </div>
+    <f-button-edit :enable-clear="enableClear" disable v-model="text"></f-button-edit>
+</template>
+```
+
+:::
+
 ## 文本标签
 
 ## 提示信息