@a2simcode/ui 0.0.54 → 0.0.56

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>

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

@@ -1,91 +1,91 @@
-<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: '订单1',
-    items: [
-      { i: '1-1', product: '商品A', quantity: 2, price: 100 },
-      { i: '1-2', product: '商品B', quantity: 1, price: 200 },
-    ],
-  },
-])
-
-const columns = ref<any[]>([
-  {
-    id: 'name',
-    type: 'j-input',
-    config: {
-      label: '订单名称',
-      placeholder: '请输入订单名称',
-      defaultValue: '',
-    },
-  },
-  {
-    id: 'items',
-    type: 'j-input-rows',
-    config: {
-      defaultValue: [],
-      valueRowKey: 'items',
-      showNum: true,
-      isCompact: true,
-      isWrap: true,
-      editConfig: {
-        isAddBtn: true,
-        isRemoveBtn: true,
-        readonly: false,
-        drag: false,
-      },
-      columns: [
-        {
-          id: 'product',
-          type: 'j-input',
-          config: {
-            label: '商品名称',
-            placeholder: '请输入商品名称',
-            defaultValue: '',
-          },
-        },
-        {
-          id: 'quantity',
-          type: 'j-number',
-          config: {
-            label: '数量',
-            placeholder: '请输入数量',
-            defaultValue: 0,
-            min: 1,
-          },
-        },
-        {
-          id: 'price',
-          type: 'j-number',
-          config: {
-            label: '单价',
-            placeholder: '请输入单价',
-            defaultValue: 0,
-            min: 0,
-          },
-        },
-      ],
-    },
-  },
-])
-
-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 { EditConfigType } from '@simcode/ui'
+
+const tableData = ref([
+  {
+    i: '1',
+    name: '订单1',
+    items: [
+      { i: '1-1', product: '商品A', quantity: 2, price: 100 },
+      { i: '1-2', product: '商品B', quantity: 1, price: 200 },
+    ],
+  },
+])
+
+const columns = ref<any[]>([
+  {
+    id: 'name',
+    type: 'j-input',
+    config: {
+      label: '订单名称',
+      placeholder: '请输入订单名称',
+      defaultValue: '',
+    },
+  },
+  {
+    id: 'items',
+    type: 'j-input-rows',
+    config: {
+      defaultValue: [],
+      valueRowKey: 'items',
+      showNum: true,
+      isCompact: true,
+      isWrap: true,
+      editConfig: {
+        isAddBtn: true,
+        isRemoveBtn: true,
+        readonly: false,
+        drag: false,
+      },
+      columns: [
+        {
+          id: 'product',
+          type: 'j-input',
+          config: {
+            label: '商品名称',
+            placeholder: '请输入商品名称',
+            defaultValue: '',
+          },
+        },
+        {
+          id: 'quantity',
+          type: 'j-number',
+          config: {
+            label: '数量',
+            placeholder: '请输入数量',
+            defaultValue: 0,
+            min: 1,
+          },
+        },
+        {
+          id: 'price',
+          type: 'j-number',
+          config: {
+            label: '单价',
+            placeholder: '请输入单价',
+            defaultValue: 0,
+            min: 0,
+          },
+        },
+      ],
+    },
+  },
+])
+
+const editConfig = ref<EditConfigType>({
+  isAddBtn: true,
+  isRemoveBtn: true,
+  readonly: false,
+})
+</script>

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

@@ -1,27 +1,27 @@
-<template>
-  <div class="example-container">
-    <j-input-tag v-model="tags" placeholder="请输入内容后回车添加标签" @change="handleChange" />
-    <div class="result-display">当前标签值 (String): "{{ tags }}"</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tags = ref('Vue,React,Angular')
-
-const handleChange = (val: { value: string }) => {
-  console.log('tags changed:', val)
-}
-</script>
-
-<style scoped>
-.example-container {
-  width: 100%;
-}
-.result-display {
-  margin-top: 10px;
-  font-size: 14px;
-  color: #666;
-}
-</style>
+<template>
+  <div class="example-container">
+    <j-input-tag v-model="tags" placeholder="请输入内容后回车添加标签" @change="handleChange" />
+    <div class="result-display">当前标签值 (String): "{{ tags }}"</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tags = ref('Vue,React,Angular')
+
+const handleChange = (val: { value: string }) => {
+  console.log('tags changed:', val)
+}
+</script>
+
+<style scoped>
+.example-container {
+  width: 100%;
+}
+.result-display {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/input-tag/colors.vue

@@ -1,23 +1,23 @@
-<template>
-  <div class="example-container">
-    <j-input-tag v-model="tags" :colors="customColors" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tags = ref('红色,蓝色,绿色')
-
-const customColors = [
-  { color: '#fff', backgroundColor: '#f56c6c', borderColor: '#f56c6c' },
-  { color: '#fff', backgroundColor: '#409eff', borderColor: '#409eff' },
-  { color: '#fff', backgroundColor: '#67c23a', borderColor: '#67c23a' },
-]
-</script>
-
-<style scoped>
-.example-container {
-  width: 100%;
-}
-</style>
+<template>
+  <div class="example-container">
+    <j-input-tag v-model="tags" :colors="customColors" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tags = ref('红色,蓝色,绿色')
+
+const customColors = [
+  { color: '#fff', backgroundColor: '#f56c6c', borderColor: '#f56c6c' },
+  { color: '#fff', backgroundColor: '#409eff', borderColor: '#409eff' },
+  { color: '#fff', backgroundColor: '#67c23a', borderColor: '#67c23a' },
+]
+</script>
+
+<style scoped>
+.example-container {
+  width: 100%;
+}
+</style>

package/docs/examples/input-tag/readonly.vue

@@ -1,17 +1,17 @@
-<template>
-  <div class="example-container">
-    <j-input-tag v-model="tags" readonly />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tags = ref('不可编辑,只读标签')
-</script>
-
-<style scoped>
-.example-container {
-  width: 100%;
-}
-</style>
+<template>
+  <div class="example-container">
+    <j-input-tag v-model="tags" readonly />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tags = ref('不可编辑,只读标签')
+</script>
+
+<style scoped>
+.example-container {
+  width: 100%;
+}
+</style>

package/docs/examples/layer/basic.vue

@@ -1,43 +1,43 @@
-<template>
-  <div>
-    <j-button label="打开弹窗(Modal)" style="margin-right: 8px" @click="openModal" />
-    <j-button label="打开全屏(Full)" style="margin-right: 8px" @click="openFull" />
-    <j-button label="打开抽屉(Drawer)" @click="openDrawer" />
-    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
-      <div style="padding: 16px">
-        <p>这是 Layer 组件的基础示例。</p>
-        <p>Layer 组件支持三种展示形式：弹窗(modal)、全屏(full)、抽屉(drawer)。</p>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openModal = () => {
-  layerRef.value.open('弹窗模式', 'modal')
-}
-
-const openFull = () => {
-  layerRef.value.open('全屏模式', 'full')
-}
-
-const openDrawer = () => {
-  layerRef.value.open('抽屉模式', 'drawer')
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1000)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开弹窗(Modal)" style="margin-right: 8px" @click="openModal" />
+    <j-button label="打开全屏(Full)" style="margin-right: 8px" @click="openFull" />
+    <j-button label="打开抽屉(Drawer)" @click="openDrawer" />
+    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <p>这是 Layer 组件的基础示例。</p>
+        <p>Layer 组件支持三种展示形式：弹窗(modal)、全屏(full)、抽屉(drawer)。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openModal = () => {
+  layerRef.value.open('弹窗模式', 'modal')
+}
+
+const openFull = () => {
+  layerRef.value.open('全屏模式', 'full')
+}
+
+const openDrawer = () => {
+  layerRef.value.open('抽屉模式', 'drawer')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>