@a2simcode/ui 0.0.159 → 0.0.160

package/docs/examples/input-layer/basic.vue

@@ -1,86 +1,86 @@
-<template>
-  <div style="width: 300px">
-    <j-input-layer
-      v-model="value"
-      placeholder="请选择用户"
-      :columns="columns"
-      :load-layer-data="loadData"
-      :width="800"
-      :height="500"
-      value-key="id"
-      label-key="name"
-      @change="handleChange"
-    />
-    <div style="margin-top: 10px">选中值: {{ value }}</div>
-
-    <j-input-layer
-      v-model="value"
-      :columns="columns"
-      :load-layer-data="loadData"
-      :width="800"
-      :height="500"
-      value-key="id"
-      label-key="name"
-      @change="handleChange"
-      :only-button="true"
-      :button-label="'选择用户'"
-      :button-ghost="true"
-      button-type="primary"
-      button-shape="round"
-    />
-    <div style="margin-top: 10px">选中值: {{ value }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-const handleChange = (data) => {
-  console.log(data, 'data')
-}
-
-const columns = [
-  {
-    id: 'id',
-    config: {
-      label: 'ID',
-      width: 80,
-    },
-  },
-  {
-    id: 'name',
-    config: {
-      label: '姓名',
-      width: 120,
-    },
-  },
-  {
-    id: 'age',
-    config: {
-      label: '年龄',
-      width: 80,
-    },
-  },
-  {
-    id: 'email',
-    config: {
-      label: '邮箱',
-    },
-  },
-]
-
-const loadData = async () => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve([
-        { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
-        { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
-        { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
-        { id: '4', name: '赵六', age: 35, email: 'zhaoliu@example.com' },
-        { id: '5', name: '孙七', age: 22, email: 'sunqi@example.com' },
-      ])
-    }, 500)
-  })
-}
-</script>
+<template>
+  <div style="width: 300px">
+    <j-input-layer
+      v-model="value"
+      placeholder="请选择用户"
+      :columns="columns"
+      :load-layer-data="loadData"
+      :width="800"
+      :height="500"
+      value-key="id"
+      label-key="name"
+      @change="handleChange"
+    />
+    <div style="margin-top: 10px">选中值: {{ value }}</div>
+
+    <j-input-layer
+      v-model="value"
+      :columns="columns"
+      :load-layer-data="loadData"
+      :width="800"
+      :height="500"
+      value-key="id"
+      label-key="name"
+      @change="handleChange"
+      :only-button="true"
+      :button-label="'选择用户'"
+      :button-ghost="true"
+      button-type="primary"
+      button-shape="round"
+    />
+    <div style="margin-top: 10px">选中值: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const handleChange = (data) => {
+  console.log(data, 'data')
+}
+
+const columns = [
+  {
+    id: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 120,
+    },
+  },
+  {
+    id: 'age',
+    config: {
+      label: '年龄',
+      width: 80,
+    },
+  },
+  {
+    id: 'email',
+    config: {
+      label: '邮箱',
+    },
+  },
+]
+
+const loadData = async () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
+        { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
+        { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
+        { id: '4', name: '赵六', age: 35, email: 'zhaoliu@example.com' },
+        { id: '5', name: '孙七', age: 22, email: 'sunqi@example.com' },
+      ])
+    }, 500)
+  })
+}
+</script>

package/docs/examples/input-rows/basic.vue

@@ -1,73 +1,73 @@
-<template>
-  <div>
-    <h4>基础用法</h4>
-    <j-input-rows
-      v-model="tableData"
-      :columns="columns"
-      :edit-config="editConfig"
-      @change="handleChange"
-      @row-change="handleRowChange"
-    />
-    <div style="margin-top: 16px">
-      <pre>{{ JSON.stringify(tableData, null, 2) }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { EditConfigType } from '@simcode/ui'
-
-const tableData = ref([
-  { i: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
-  { i: '2', name: '李四', age: 30, email: 'lisi@example.com' },
-])
-
-const columns = ref<any[]>([
-  {
-    id: 'name',
-    type: 'j-input',
-    config: {
-      label: '姓名',
-      placeholder: '请输入姓名',
-      defaultValue: '',
-    },
-  },
-  {
-    id: 'age',
-    type: 'j-number',
-    config: {
-      label: '年龄',
-      placeholder: '请输入年龄',
-      defaultValue: 0,
-      min: 0,
-      max: 150,
-    },
-  },
-  {
-    id: 'email',
-    type: 'j-input',
-    config: {
-      label: '邮箱',
-      placeholder: '请输入邮箱',
-      defaultValue: '',
-    },
-  },
-])
-
-const editConfig = ref<EditConfigType>({
-  isAddBtn: true,
-  isRemoveBtn: true,
-  addBtnText: '添加一行',
-  readonly: false,
-  drag: false,
-})
-
-const handleChange = (data: any) => {
-  console.log('变更事件:', data)
-}
-
-const handleRowChange = (data: any) => {
-  console.log('行变更事件:', data)
-}
-</script>
+<template>
+  <div>
+    <h4>基础用法</h4>
+    <j-input-rows
+      v-model="tableData"
+      :columns="columns"
+      :edit-config="editConfig"
+      @change="handleChange"
+      @row-change="handleRowChange"
+    />
+    <div style="margin-top: 16px">
+      <pre>{{ JSON.stringify(tableData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { EditConfigType } from '@simcode/ui'
+
+const tableData = ref([
+  { i: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
+  { i: '2', name: '李四', age: 30, email: 'lisi@example.com' },
+])
+
+const columns = ref<any[]>([
+  {
+    id: 'name',
+    type: 'j-input',
+    config: {
+      label: '姓名',
+      placeholder: '请输入姓名',
+      defaultValue: '',
+    },
+  },
+  {
+    id: 'age',
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      placeholder: '请输入年龄',
+      defaultValue: 0,
+      min: 0,
+      max: 150,
+    },
+  },
+  {
+    id: 'email',
+    type: 'j-input',
+    config: {
+      label: '邮箱',
+      placeholder: '请输入邮箱',
+      defaultValue: '',
+    },
+  },
+])
+
+const editConfig = ref<EditConfigType>({
+  isAddBtn: true,
+  isRemoveBtn: true,
+  addBtnText: '添加一行',
+  readonly: false,
+  drag: false,
+})
+
+const handleChange = (data: any) => {
+  console.log('变更事件:', data)
+}
+
+const handleRowChange = (data: any) => {
+  console.log('行变更事件:', data)
+}
+</script>

package/docs/examples/input-rows/drag.vue

@@ -1,48 +1,48 @@
-<template>
-  <div>
-    <h4>拖拽排序</h4>
-    <j-input-rows v-model="tableData" :columns="columns" :edit-config="editConfig" />
-    <div style="margin-top: 16px">
-      <pre>{{ JSON.stringify(tableData, null, 2) }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { EditConfigType } from '@simcode/ui'
-
-const tableData = ref([
-  { i: '1', name: '第一项', value: 100 },
-  { i: '2', name: '第二项', value: 200 },
-  { i: '3', name: '第三项', value: 300 },
-])
-
-const columns = ref<any[]>([
-  {
-    id: 'name',
-    type: 'j-input',
-    config: {
-      label: '名称',
-      placeholder: '请输入名称',
-      defaultValue: '',
-    },
-  },
-  {
-    id: 'value',
-    type: 'j-number',
-    config: {
-      label: '数值',
-      placeholder: '请输入数值',
-      defaultValue: 0,
-    },
-  },
-])
-
-const editConfig = ref<EditConfigType>({
-  isAddBtn: true,
-  isRemoveBtn: true,
-  drag: true,
-  readonly: false,
-})
-</script>
+<template>
+  <div>
+    <h4>拖拽排序</h4>
+    <j-input-rows v-model="tableData" :columns="columns" :edit-config="editConfig" />
+    <div style="margin-top: 16px">
+      <pre>{{ JSON.stringify(tableData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { EditConfigType } from '@simcode/ui'
+
+const tableData = ref([
+  { i: '1', name: '第一项', value: 100 },
+  { i: '2', name: '第二项', value: 200 },
+  { i: '3', name: '第三项', value: 300 },
+])
+
+const columns = ref<any[]>([
+  {
+    id: 'name',
+    type: 'j-input',
+    config: {
+      label: '名称',
+      placeholder: '请输入名称',
+      defaultValue: '',
+    },
+  },
+  {
+    id: 'value',
+    type: 'j-number',
+    config: {
+      label: '数值',
+      placeholder: '请输入数值',
+      defaultValue: 0,
+    },
+  },
+])
+
+const editConfig = ref<EditConfigType>({
+  isAddBtn: true,
+  isRemoveBtn: true,
+  drag: true,
+  readonly: false,
+})
+</script>

package/docs/examples/input-rows/layer-form.vue

@@ -1,85 +1,85 @@
-<template>
-  <div>
-    <h4>弹窗表单</h4>
-    <j-input-rows v-model="tableData" :columns="columns" :edit-config="editConfig" />
-    <div style="margin-top: 16px">
-      <pre>{{ JSON.stringify(tableData, null, 2) }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { ColumnType, EditConfigType } from '@simcode/ui'
-
-const tableData = ref([
-  {
-    i: '1',
-    name: '用户1',
-    detail: {
-      address: '北京市朝阳区',
-      phone: '13800138000',
-      email: 'user1@example.com',
-    },
-  },
-])
-
-const columns = ref<ColumnType[]>([
-  {
-    prop: 'name',
-    inputType: 'j-input',
-    config: {
-      label: '姓名',
-      placeholder: '请输入姓名',
-      defaultValue: '',
-    },
-  },
-  {
-    prop: 'detail',
-    inputType: 'layerForm',
-    config: {
-      label: '详细信息',
-      defaultValue: {},
-      valueRowKey: 'detail',
-      layerLabel: '编辑详细信息',
-      layerWidth: 600,
-      layerHeight: 400,
-    },
-    children: [
-      {
-        id: 'address',
-        type: 'j-input',
-        config: {
-          label: '地址',
-          field: 'address',
-          placeholder: '请输入地址',
-        },
-      },
-      {
-        id: 'phone',
-        type: 'j-input',
-        config: {
-          label: '电话',
-          field: 'phone',
-          placeholder: '请输入电话',
-        },
-      },
-      {
-        id: 'email',
-        type: 'j-input',
-        config: {
-          label: '邮箱',
-          field: 'email',
-          placeholder: '请输入邮箱',
-        },
-      },
-    ],
-  },
-])
-
-const editConfig = ref<EditConfigType>({
-  isAddBtn: true,
-  isRemoveBtn: true,
-  readonly: false,
-})
-</script>
+<template>
+  <div>
+    <h4>弹窗表单</h4>
+    <j-input-rows v-model="tableData" :columns="columns" :edit-config="editConfig" />
+    <div style="margin-top: 16px">
+      <pre>{{ JSON.stringify(tableData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ColumnType, EditConfigType } from '@simcode/ui'
+
+const tableData = ref([
+  {
+    i: '1',
+    name: '用户1',
+    detail: {
+      address: '北京市朝阳区',
+      phone: '13800138000',
+      email: 'user1@example.com',
+    },
+  },
+])
+
+const columns = ref<ColumnType[]>([
+  {
+    prop: 'name',
+    inputType: 'j-input',
+    config: {
+      label: '姓名',
+      placeholder: '请输入姓名',
+      defaultValue: '',
+    },
+  },
+  {
+    prop: 'detail',
+    inputType: 'layerForm',
+    config: {
+      label: '详细信息',
+      defaultValue: {},
+      valueRowKey: 'detail',
+      layerLabel: '编辑详细信息',
+      layerWidth: 600,
+      layerHeight: 400,
+    },
+    children: [
+      {
+        id: 'address',
+        type: 'j-input',
+        config: {
+          label: '地址',
+          field: 'address',
+          placeholder: '请输入地址',
+        },
+      },
+      {
+        id: 'phone',
+        type: 'j-input',
+        config: {
+          label: '电话',
+          field: 'phone',
+          placeholder: '请输入电话',
+        },
+      },
+      {
+        id: 'email',
+        type: 'j-input',
+        config: {
+          label: '邮箱',
+          field: 'email',
+          placeholder: '请输入邮箱',
+        },
+      },
+    ],
+  },
+])
+
+const editConfig = ref<EditConfigType>({
+  isAddBtn: true,
+  isRemoveBtn: true,
+  readonly: false,
+})
+</script>