@a2simcode/ui 0.0.55 → 0.0.57

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>

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

@@ -1,33 +1,33 @@
-<template>
-  <j-input-button v-model="value" title="选择数据" btn-text="打开弹窗" :ok="handleOk">
-    <div style="padding: 20px">
-      <j-input
-        v-model="form.name"
-        label="名称"
-        placeholder="请输入名称"
-        style="margin-bottom: 16px"
-      />
-      <j-input v-model="form.age" label="年龄" placeholder="请输入年龄" />
-    </div>
-  </j-input-button>
-  <p v-if="value" style="margin-top: 12px; color: #606266">选择的结果: {{ value }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-const value = ref('')
-const form = reactive({
-  name: '',
-  age: '',
-})
-
-const handleOk = async () => {
-  // 模拟异步操作
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(JSON.stringify(form))
-    }, 500)
-  })
-}
-</script>
+<template>
+  <j-input-button v-model="value" title="选择数据" btn-text="打开弹窗" :ok="handleOk">
+    <div style="padding: 20px">
+      <j-input
+        v-model="form.name"
+        label="名称"
+        placeholder="请输入名称"
+        style="margin-bottom: 16px"
+      />
+      <j-input v-model="form.age" label="年龄" placeholder="请输入年龄" />
+    </div>
+  </j-input-button>
+  <p v-if="value" style="margin-top: 12px; color: #606266">选择的结果: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+const value = ref('')
+const form = reactive({
+  name: '',
+  age: '',
+})
+
+const handleOk = async () => {
+  // 模拟异步操作
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(JSON.stringify(form))
+    }, 500)
+  })
+}
+</script>

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

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <h4>基础用法</h4>
+    <j-input-cards
+      v-model="cardData"
+      :columns="cardColumns"
+      :edit-config="editConfig"
+      @change="handleChange"
+      @row-change="handleRowChange"
+    />
+    <div style="margin-top: 16px">
+      <h3>当前数据:</h3>
+      <pre>{{ JSON.stringify(cardData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import type { EditConfigType } from '@/packages/components/input-cards/src/interface';
+
+const cardData = ref([
+  { i: '1', name: '产品A', price: 100, stock: 10 },
+  { i: '2', name: '产品B', price: 200, stock: 20 },
+]);
+
+const cardColumns = ref<any[]>([
+  {
+    id: 'name',
+    type: 'j-input',
+    config: {
+      label: '产品名称',
+      placeholder: '请输入产品名称',
+      defaultValue: '',
+    },
+  },
+  {
+    id: 'price',
+    type: 'j-number',
+    config: {
+      label: '价格',
+      placeholder: '请输入价格',
+      defaultValue: 0,
+      min: 0,
+    },
+  },
+  {
+    id: 'stock',
+    type: 'j-number',
+    config: {
+      label: '库存',
+      placeholder: '请输入库存',
+      defaultValue: 0,
+      min: 0,
+    },
+  },
+]);
+
+const editConfig = reactive<EditConfigType>({
+  isAddBtn: true,
+  isRemoveBtn: true,
+  addBtnText: '添加新卡片',
+  readonly: false,
+  // drag: false, // InputCards 暂不支持拖拽
+});
+
+const handleChange = (data: any) => {
+  console.log('变更事件:', data);
+};
+
+const handleRowChange = (data: any) => {
+  console.log('行变更事件:', data);
+};
+</script>
+
+<style scoped>
+pre {
+  background-color: #f4f4f4;
+  padding: 10px;
+  border-radius: 4px;
+}
+</style>