@a2simcode/ui 0.0.127 → 0.0.129

package/docs/examples/form/basic.vue

@@ -5,6 +5,12 @@
       <j-button type="primary" label="提交" @click="handleSubmit"></j-button>
       <j-button style="margin-left: 8px" label="重置" @click="handleReset"></j-button>
       <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
+      <j-button
+        style="margin-left: 8px"
+        label="init 重新初始化"
+        @click="handleInitWithSchema"
+      ></j-button>
+      <j-button style="margin-left: 8px" label="init 恢复" @click="handleInitReset"></j-button>
     </div>
   </div>
 </template>
@@ -25,6 +31,37 @@ const formConfig = reactive({
 const handleGetFormData = () => {
   console.log(formRef.value.getFormData(), 'getFormData')
 }
+
+const initSchema = [
+  {
+    type: 'j-input',
+    config: {
+      label: '用户名',
+      field: 'username',
+      placeholder: '请输入用户名',
+      rule: [{ required: true, message: '请输入用户名' }],
+    },
+  },
+  {
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      field: 'age',
+      placeholder: '请输入年龄',
+      min: 0,
+      max: 150,
+    },
+  },
+]
+
+const handleInitWithSchema = async () => {
+  await formRef.value.init(initSchema, { username: '张三', age: 18 })
+}
+
+const handleInitReset = async () => {
+  await formRef.value.init(schema)
+}
+
 const schema = [
   {
     type: 'el-segmented',

package/docs/examples/form/init.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <j-form ref="formRef" :config="formConfig" />
+    <div style="margin-top: 16px; padding-left: 100px">
+      <j-button type="primary" label="init 精简表单" @click="handleInitSimple"></j-button>
+      <j-button style="margin-left: 8px" label="init 完整表单" @click="handleInitFull"></j-button>
+      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const formRef = ref()
+
+const formConfig = reactive({
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+})
+
+const simpleSchema = [
+  {
+    type: 'j-input',
+    config: {
+      label: '用户名',
+      field: 'username',
+      placeholder: '请输入用户名',
+      rule: [{ required: true, message: '请输入用户名' }],
+    },
+  },
+  {
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      field: 'age',
+      placeholder: '请输入年龄',
+      min: 0,
+      max: 150,
+    },
+  },
+]
+
+const fullSchema = [
+  ...simpleSchema,
+  {
+    type: 'j-select',
+    config: {
+      label: '状态',
+      field: 'status',
+      placeholder: '请选择',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+]
+
+const schema = fullSchema
+
+const handleInitSimple = async () => {
+  await formRef.value.init(simpleSchema, { username: '张三', age: 18 })
+}
+
+const handleInitFull = async () => {
+  await formRef.value.init(fullSchema, { username: '李四', age: 28, status: 1 })
+}
+
+const handleGetFormData = () => {
+  console.log(formRef.value.getFormData(), 'getFormData')
+}
+</script>

package/docs/examples/input-decorated-title/basic.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h3>基本使用</h3>
+    <j-input-decorated-title v-model="titleType1" />
+    <p>当前选中的 titleType: {{ titleType1 }}</p>
+
+    <h3>自定义背景颜色</h3>
+    <j-input-decorated-title v-model="titleType2" background-color="#409eff" />
+    <p>当前选中的 titleType: {{ titleType2 }}</p>
+
+    <h3>自定义标题颜色和字体粗细</h3>
+    <j-input-decorated-title v-model="titleType3" color="#f56c6c" weight="bold" />
+    <p>当前选中的 titleType: {{ titleType3 }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const titleType1 = ref('title1')
+const titleType2 = ref('title2')
+const titleType3 = ref('title3')
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.127",
+  "version": "0.0.129",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",