@a2simcode/ui 0.0.127 → 0.0.128

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/guid/basic.vue

@@ -1,10 +1,10 @@
-<template>
-  <j-guid v-model="value" />
-  <p v-if="value" style="margin-top: 12px; color: #606266">生成的 UUID: {{ value }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-</script>
+<template>
+  <j-guid v-model="value" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">生成的 UUID: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/guid/size.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-guid v-model="value" size="large" style="width: 300px" />
-    <j-guid v-model="value" style="width: 300px" />
-    <j-guid v-model="value" size="small" style="width: 300px" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-guid v-model="value" size="large" style="width: 300px" />
+    <j-guid v-model="value" style="width: 300px" />
+    <j-guid v-model="value" size="small" style="width: 300px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/hpanel/basic.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="hpanel-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-hpanel class="custom-panel">
-        <template #left>
-          <div class="side-content">Left Slot</div>
-        </template>
-        <div class="main-content">Default Slot (Main Content)</div>
-        <template #right>
-          <div class="side-content">Right Slot</div>
-        </template>
-      </j-hpanel>
-    </div>
-
-    <div class="demo-item">
-      <p>仅左侧和内容</p>
-      <j-hpanel class="custom-panel">
-        <template #left>
-          <div class="side-content">Left</div>
-        </template>
-        <div class="main-content">Main Content</div>
-      </j-hpanel>
-    </div>
-
-    <div class="demo-item">
-      <p>仅内容和右侧</p>
-      <j-hpanel class="custom-panel">
-        <div class="main-content">Main Content</div>
-        <template #right>
-          <div class="side-content">Right</div>
-        </template>
-      </j-hpanel>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 示例代码无需额外逻辑
-</script>
-
-<style scoped>
-.hpanel-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.demo-item p {
-  margin: 0 0 12px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-  font-weight: 500;
-}
-
-.custom-panel {
-  border: 1px solid var(--j-color-border);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.side-content {
-  background-color: var(--j-color-fill-2);
-  padding: 12px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 100px;
-}
-
-.main-content {
-  background-color: var(--j-color-bg-2);
-  padding: 12px 20px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
+<template>
+  <div class="hpanel-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-hpanel class="custom-panel">
+        <template #left>
+          <div class="side-content">Left Slot</div>
+        </template>
+        <div class="main-content">Default Slot (Main Content)</div>
+        <template #right>
+          <div class="side-content">Right Slot</div>
+        </template>
+      </j-hpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅左侧和内容</p>
+      <j-hpanel class="custom-panel">
+        <template #left>
+          <div class="side-content">Left</div>
+        </template>
+        <div class="main-content">Main Content</div>
+      </j-hpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅内容和右侧</p>
+      <j-hpanel class="custom-panel">
+        <div class="main-content">Main Content</div>
+        <template #right>
+          <div class="side-content">Right</div>
+        </template>
+      </j-hpanel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.hpanel-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+
+.custom-panel {
+  border: 1px solid var(--j-color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.side-content {
+  background-color: var(--j-color-fill-2);
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+}
+
+.main-content {
+  background-color: var(--j-color-bg-2);
+  padding: 12px 20px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/docs/examples/icon/basic.vue

@@ -1,9 +1,9 @@
-<template>
-  <div style="display: flex; gap: 20px; align-items: center">
-    <j-icon icon="mdi:home" />
-    <j-icon icon="mdi:account" color="#409eff" />
-    <j-icon icon="mdi:check-circle" color="#67c23a" />
-    <j-icon icon="mdi:alert-circle" color="#f56c6c" />
-    <j-icon icon="mdi:information" color="#909399" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; gap: 20px; align-items: center">
+    <j-icon icon="mdi:home" />
+    <j-icon icon="mdi:account" color="#409eff" />
+    <j-icon icon="mdi:check-circle" color="#67c23a" />
+    <j-icon icon="mdi:alert-circle" color="#f56c6c" />
+    <j-icon icon="mdi:information" color="#909399" />
+  </div>
+</template>

package/docs/examples/icon/rotate-flip.vue

@@ -1,9 +1,9 @@
-<template>
-  <div style="display: flex; gap: 20px; align-items: center; font-size: 24px">
-    <j-icon icon="mdi:send" :rotate="45" />
-    <j-icon icon="mdi:send" :rotate="90" />
-    <j-icon icon="mdi:send" :rotate="180" />
-    <j-icon icon="mdi:send" flip="horizontal" />
-    <j-icon icon="mdi:send" flip="vertical" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; gap: 20px; align-items: center; font-size: 24px">
+    <j-icon icon="mdi:send" :rotate="45" />
+    <j-icon icon="mdi:send" :rotate="90" />
+    <j-icon icon="mdi:send" :rotate="180" />
+    <j-icon icon="mdi:send" flip="horizontal" />
+    <j-icon icon="mdi:send" flip="vertical" />
+  </div>
+</template>

package/docs/examples/icon/size.vue

@@ -1,7 +1,7 @@
-<template>
-  <div style="display: flex; gap: 20px; align-items: center">
-    <j-icon icon="mdi:home" :size="16" />
-    <j-icon icon="mdi:home" :size="24" />
-    <j-icon icon="mdi:home" :size="32" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; gap: 20px; align-items: center">
+    <j-icon icon="mdi:home" :size="16" />
+    <j-icon icon="mdi:home" :size="24" />
+    <j-icon icon="mdi:home" :size="32" />
+  </div>
+</template>

package/docs/examples/input/basic.vue

@@ -1,10 +1,10 @@
-<template>
-  <j-input v-model="value" placeholder="请输入内容" style="width: 300px" />
-  <p v-if="value" style="margin-top: 12px; color: #606266">输入的内容: {{ value }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-</script>
+<template>
+  <j-input v-model="value" placeholder="请输入内容" style="width: 300px" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">输入的内容: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/input/clearable.vue

@@ -1,12 +1,12 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input v-model="value1" clearable placeholder="可清除的输入框" style="width: 300px" />
-    <p v-if="value1" style="color: #606266">输入的内容: {{ value1 }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input v-model="value1" clearable placeholder="可清除的输入框" style="width: 300px" />
+    <p v-if="value1" style="color: #606266">输入的内容: {{ value1 }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+</script>

package/docs/examples/input/disabled.vue

@@ -1,6 +1,6 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input disabled placeholder="禁用状态" style="width: 300px" />
-    <j-input readonly model-value="只读内容" style="width: 300px" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input disabled placeholder="禁用状态" style="width: 300px" />
+    <j-input readonly model-value="只读内容" style="width: 300px" />
+  </div>
+</template>

package/docs/examples/input/icon.vue

@@ -1,23 +1,23 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input
-      v-model="value1"
-      prefix-icon="mdi:search"
-      placeholder="带前缀图标的输入框"
-      style="width: 300px"
-    />
-    <j-input
-      v-model="value2"
-      suffix-icon="mdi:calendar"
-      placeholder="带后缀图标的输入框"
-      style="width: 300px"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="value1"
+      prefix-icon="mdi:search"
+      placeholder="带前缀图标的输入框"
+      style="width: 300px"
+    />
+    <j-input
+      v-model="value2"
+      suffix-icon="mdi:calendar"
+      placeholder="带后缀图标的输入框"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+</script>

package/docs/examples/input/password.vue

@@ -1,18 +1,18 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input
-      v-model="password"
-      type="password"
-      show-password
-      placeholder="请输入密码"
-      style="width: 300px"
-    />
-    <p v-if="password" style="color: #606266">密码: {{ password }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const password = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="password"
+      type="password"
+      show-password
+      placeholder="请输入密码"
+      style="width: 300px"
+    />
+    <p v-if="password" style="color: #606266">密码: {{ password }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const password = ref('')
+</script>

package/docs/examples/input/size.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input v-model="value" size="large" placeholder="大型输入框" style="width: 300px" />
-    <j-input v-model="value" placeholder="默认输入框" style="width: 300px" />
-    <j-input v-model="value" size="small" placeholder="小型输入框" style="width: 300px" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input v-model="value" size="large" placeholder="大型输入框" style="width: 300px" />
+    <j-input v-model="value" placeholder="默认输入框" style="width: 300px" />
+    <j-input v-model="value" size="small" placeholder="小型输入框" style="width: 300px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/input/textarea.vue

@@ -1,25 +1,25 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input
-      v-model="value1"
-      type="textarea"
-      :rows="4"
-      placeholder="固定行数的文本域"
-      style="width: 300px"
-    />
-    <j-input
-      v-model="value2"
-      type="textarea"
-      :autosize="{ minRows: 2, maxRows: 6 }"
-      placeholder="自适应高度的文本域"
-      style="width: 300px"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="value1"
+      type="textarea"
+      :rows="4"
+      placeholder="固定行数的文本域"
+      style="width: 300px"
+    />
+    <j-input
+      v-model="value2"
+      type="textarea"
+      :autosize="{ minRows: 2, maxRows: 6 }"
+      placeholder="自适应高度的文本域"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+</script>

package/docs/examples/input/word-limit.vue

@@ -1,28 +1,28 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-input
-      v-model="value1"
-      type="text"
-      :maxlength="10"
-      show-word-limit
-      placeholder="最多输入10个字符"
-      style="width: 300px"
-    />
-    <j-input
-      v-model="value2"
-      type="textarea"
-      :maxlength="20"
-      show-word-limit
-      word-limit-position="outside"
-      placeholder="字数统计在外部"
-      style="width: 300px"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="value1"
+      type="text"
+      :maxlength="10"
+      show-word-limit
+      placeholder="最多输入10个字符"
+      style="width: 300px"
+    />
+    <j-input
+      v-model="value2"
+      type="textarea"
+      :maxlength="20"
+      show-word-limit
+      word-limit-position="outside"
+      placeholder="字数统计在外部"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+</script>