@a2simcode/ui 0.0.162 → 0.0.164

package/docs/examples/form/rule-format.vue

@@ -1,179 +1,179 @@
-<template>
-  <div>
-    <j-form ref="formRef" :schema="schema" :config="formConfig" />
-    <div style="margin-top: 16px; padding-left: 100px">
-      <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>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, reactive, ref } from 'vue'
-
-const formRef = ref()
-
-const formConfig = reactive({
-  labelWidth: 100,
-  labelPosition: 'right',
-  size: 'default',
-  gutter: 16,
-  span: 24,
-})
-
-const formatOptionsMap = {
-  1: [
-    { value: 'mmdd', label: 'mmdd' },
-    { value: 'ddmm', label: 'ddmm' },
-    { value: 'mmyy', label: 'mmyy' },
-    { value: 'yymm', label: 'yymm' },
-    { value: 'yyyy', label: 'yyyy' },
-    { value: 'yy', label: 'yy' },
-    { value: 'yyyymm', label: 'yyyymm' },
-    { value: 'yymmdd', label: 'yymmdd' },
-    { value: 'yyyymmdd', label: 'yyyymmdd' },
-  ],
-  2: [
-    { value: '000', label: '000' },
-    { value: '0000', label: '0000' },
-    { value: '00000', label: '00000' },
-    { value: '000000', label: '000000' },
-  ],
-  3: [
-    { value: 'code', label: '公司编号' },
-    { value: 'name', label: '公司名称' },
-  ],
-  4: [
-    { value: 'code', label: '部门编号' },
-    { value: 'name', label: '部门名称' },
-  ],
-  5: [
-    { value: 'code', label: '用户编号' },
-    { value: 'name', label: '用户名称' },
-  ],
-}
-
-const schema = [
-  {
-    id: 'j_Name',
-    type: 'j-input',
-    config: {
-      rule: [{ required: true, message: '请输入名称' }],
-      field: 'j_Name',
-      label: '名称',
-    },
-  },
-  {
-    id: 'j_EnCode',
-    type: 'j-input',
-    config: {
-      rule: [
-        { required: true, message: '请输入编码' },
-        { type: 'only', table: 'base_coderule', key: 'j_Id' },
-      ],
-      field: 'j_EnCode',
-      label: '编码',
-    },
-  },
-  {
-    id: 'j_Des',
-    type: 'j-input',
-    config: {
-      type: 'textarea',
-      field: 'j_Des',
-      label: '说明',
-    },
-  },
-  {
-    id: 'ruleFormat',
-    type: 'j-table',
-    config: {
-      heightMode: 'auto',
-      maxHeight: 300,
-      editConfig: { isAddBtn: true, isRemoveBtn: true },
-      field: 'ruleFormat',
-      label: '规则格式',
-    },
-    children: [
-      {
-        id: 'ruleFormat.itemType',
-        type: 'j-select',
-        config: {
-          dataType: 'options',
-          options: [
-            { value: '0', label: '自定义' },
-            { value: '1', label: '日期' },
-            { value: '2', label: '流水号' },
-            { value: '3', label: '公司' },
-            { value: '4', label: '部门' },
-            { value: '5', label: '用户' },
-            { value: '6', label: '表字段' },
-          ],
-          field: 'itemType',
-          label: '前缀',
-        },
-      },
-      {
-        id: 'ruleFormat.formatStr',
-        config: {
-          field: 'formatStr',
-          label: '格式',
-        },
-        getCompType: ({ row }) => {
-          if (row?.itemType === '0') return 'j-input'
-          if (!row?.itemType || row?.itemType === '6') return 'span'
-          return 'j-select'
-        },
-        getCompConfig: ({ row }) => ({ options: formatOptionsMap[row?.itemType] }),
-      },
-      {
-        id: 'ruleFormat.stepValue',
-        type: 'j-number',
-        config: {
-          field: 'stepValue',
-          label: '步长值',
-        },
-      },
-      {
-        id: 'ruleFormat.initValue',
-        type: 'j-number',
-        config: {
-          field: 'initValue',
-          label: '初始值',
-        },
-      },
-    ],
-  },
-]
-
-onMounted(() => {
-  formRef.value.setFormData({
-    ruleFormat: [
-      {
-        itemType: '1',
-        formatStr: 'yymmdd',
-        stepValue: 1,
-        initValue: 1,
-      },
-    ],
-  })
-})
-
-const handleGetFormData = () => {
-  console.log(formRef.value.getFormData(), 'getFormData')
-}
-
-const handleSubmit = async () => {
-  const valid = await formRef.value.validate()
-  if (valid) {
-    const formData = formRef.value.getFormData()
-    console.log('表单数据:', formData)
-    alert('提交成功！')
-  }
-}
-
-const handleReset = () => {
-  formRef.value.reset()
-}
-</script>
+<template>
+  <div>
+    <j-form ref="formRef" :schema="schema" :config="formConfig" />
+    <div style="margin-top: 16px; padding-left: 100px">
+      <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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+
+const formRef = ref()
+
+const formConfig = reactive({
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+})
+
+const formatOptionsMap = {
+  1: [
+    { value: 'mmdd', label: 'mmdd' },
+    { value: 'ddmm', label: 'ddmm' },
+    { value: 'mmyy', label: 'mmyy' },
+    { value: 'yymm', label: 'yymm' },
+    { value: 'yyyy', label: 'yyyy' },
+    { value: 'yy', label: 'yy' },
+    { value: 'yyyymm', label: 'yyyymm' },
+    { value: 'yymmdd', label: 'yymmdd' },
+    { value: 'yyyymmdd', label: 'yyyymmdd' },
+  ],
+  2: [
+    { value: '000', label: '000' },
+    { value: '0000', label: '0000' },
+    { value: '00000', label: '00000' },
+    { value: '000000', label: '000000' },
+  ],
+  3: [
+    { value: 'code', label: '公司编号' },
+    { value: 'name', label: '公司名称' },
+  ],
+  4: [
+    { value: 'code', label: '部门编号' },
+    { value: 'name', label: '部门名称' },
+  ],
+  5: [
+    { value: 'code', label: '用户编号' },
+    { value: 'name', label: '用户名称' },
+  ],
+}
+
+const schema = [
+  {
+    id: 'j_Name',
+    type: 'j-input',
+    config: {
+      rule: [{ required: true, message: '请输入名称' }],
+      field: 'j_Name',
+      label: '名称',
+    },
+  },
+  {
+    id: 'j_EnCode',
+    type: 'j-input',
+    config: {
+      rule: [
+        { required: true, message: '请输入编码' },
+        { type: 'only', table: 'base_coderule', key: 'j_Id' },
+      ],
+      field: 'j_EnCode',
+      label: '编码',
+    },
+  },
+  {
+    id: 'j_Des',
+    type: 'j-input',
+    config: {
+      type: 'textarea',
+      field: 'j_Des',
+      label: '说明',
+    },
+  },
+  {
+    id: 'ruleFormat',
+    type: 'j-table',
+    config: {
+      heightMode: 'auto',
+      maxHeight: 300,
+      editConfig: { isAddBtn: true, isRemoveBtn: true },
+      field: 'ruleFormat',
+      label: '规则格式',
+    },
+    children: [
+      {
+        id: 'ruleFormat.itemType',
+        type: 'j-select',
+        config: {
+          dataType: 'options',
+          options: [
+            { value: '0', label: '自定义' },
+            { value: '1', label: '日期' },
+            { value: '2', label: '流水号' },
+            { value: '3', label: '公司' },
+            { value: '4', label: '部门' },
+            { value: '5', label: '用户' },
+            { value: '6', label: '表字段' },
+          ],
+          field: 'itemType',
+          label: '前缀',
+        },
+      },
+      {
+        id: 'ruleFormat.formatStr',
+        config: {
+          field: 'formatStr',
+          label: '格式',
+        },
+        getCompType: ({ row }) => {
+          if (row?.itemType === '0') return 'j-input'
+          if (!row?.itemType || row?.itemType === '6') return 'span'
+          return 'j-select'
+        },
+        getCompConfig: ({ row }) => ({ options: formatOptionsMap[row?.itemType] }),
+      },
+      {
+        id: 'ruleFormat.stepValue',
+        type: 'j-number',
+        config: {
+          field: 'stepValue',
+          label: '步长值',
+        },
+      },
+      {
+        id: 'ruleFormat.initValue',
+        type: 'j-number',
+        config: {
+          field: 'initValue',
+          label: '初始值',
+        },
+      },
+    ],
+  },
+]
+
+onMounted(() => {
+  formRef.value.setFormData({
+    ruleFormat: [
+      {
+        itemType: '1',
+        formatStr: 'yymmdd',
+        stepValue: 1,
+        initValue: 1,
+      },
+    ],
+  })
+})
+
+const handleGetFormData = () => {
+  console.log(formRef.value.getFormData(), 'getFormData')
+}
+
+const handleSubmit = async () => {
+  const valid = await formRef.value.validate()
+  if (valid) {
+    const formData = formRef.value.getFormData()
+    console.log('表单数据:', formData)
+    alert('提交成功！')
+  }
+}
+
+const handleReset = () => {
+  formRef.value.reset()
+}
+</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>