@a2simcode/ui 0.0.187 → 0.0.188

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

@@ -1,29 +1,29 @@
-<template>
-  <j-input-code
-    v-model="code"
-    title="脚本编辑器"
-    btn-text="编写脚本"
-    mode="javascript"
-    :example="exampleCode"
-    @change="handleChange"
-  />
-  <div style="margin-top: 12px">
-    <div style="font-weight: bold">当前脚本内容：</div>
-    <p style="background: #f4f4f5; padding: 12px; border-radius: 4px">{{ code || '未设置' }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const code = ref('console.log("Hello, World!");')
-const exampleCode = `
-    // 示例代码,只支持ES5语法
-    // 获取表单是新增还是编辑
-    var isUpdate = jianda.isUpdate
-`
-
-const handleChange = (value: string) => {
-  console.log('代码改变：', value)
-}
-</script>
+<template>
+  <j-input-code
+    v-model="code"
+    title="脚本编辑器"
+    btn-text="编写脚本"
+    mode="javascript"
+    :example="exampleCode"
+    @change="handleChange"
+  />
+  <div style="margin-top: 12px">
+    <div style="font-weight: bold">当前脚本内容：</div>
+    <p style="background: #f4f4f5; padding: 12px; border-radius: 4px">{{ code || '未设置' }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const code = ref('console.log("Hello, World!");')
+const exampleCode = `
+    // 示例代码,只支持ES5语法
+    // 获取表单是新增还是编辑
+    var isUpdate = jianda.isUpdate
+`
+
+const handleChange = (value: string) => {
+  console.log('代码改变：', value)
+}
+</script>

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

@@ -1,10 +1,10 @@
-<template>
-  <j-input-color 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-color 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-color/disabled.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <j-input-color v-model="value1" disabled placeholder="禁用状态" />
-    <j-input-color v-model="value2" readonly placeholder="只读状态" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('#409eff')
-const value2 = ref('#67c23a')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-input-color v-model="value1" disabled placeholder="禁用状态" />
+    <j-input-color v-model="value2" readonly placeholder="只读状态" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('#409eff')
+const value2 = ref('#67c23a')
+</script>

package/docs/examples/input-color/format.vue

@@ -1,17 +1,17 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <j-input-color v-model="value1" color-format="hex" placeholder="HEX 格式" />
-    <j-input-color v-model="value2" color-format="rgb" placeholder="RGB 格式" />
-    <j-input-color v-model="value3" color-format="hsl" placeholder="HSL 格式" />
-    <j-input-color v-model="value4" color-format="hsv" placeholder="HSV 格式" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('#409eff')
-const value2 = ref('rgb(64, 158, 255)')
-const value3 = ref('hsl(217, 91%, 60%)')
-const value4 = ref('hsv(217, 75%, 100%)')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-input-color v-model="value1" color-format="hex" placeholder="HEX 格式" />
+    <j-input-color v-model="value2" color-format="rgb" placeholder="RGB 格式" />
+    <j-input-color v-model="value3" color-format="hsl" placeholder="HSL 格式" />
+    <j-input-color v-model="value4" color-format="hsv" placeholder="HSV 格式" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('#409eff')
+const value2 = ref('rgb(64, 158, 255)')
+const value3 = ref('hsl(217, 91%, 60%)')
+const value4 = ref('hsv(217, 75%, 100%)')
+</script>

package/docs/examples/input-color/no-alpha.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <j-input-color v-model="value1" :show-alpha="true" placeholder="支持透明度" />
-    <j-input-color v-model="value2" :show-alpha="false" placeholder="不支持透明度" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('rgba(255, 69, 0, 0.68)')
-const value2 = ref('#409eff')
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-input-color v-model="value1" :show-alpha="true" placeholder="支持透明度" />
+    <j-input-color v-model="value2" :show-alpha="false" placeholder="不支持透明度" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('rgba(255, 69, 0, 0.68)')
+const value2 = ref('#409eff')
+</script>

package/docs/examples/input-color/only-button.vue

@@ -1,15 +1,15 @@
-<template>
-  <div style="display: flex; gap: 16px; align-items: center">
-    <j-input-color v-model="value1" only-button />
-    <j-input-color v-model="value2" only-button size="small" />
-    <j-input-color v-model="value3" only-button size="large" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-const value3 = ref('')
-</script>
+<template>
+  <div style="display: flex; gap: 16px; align-items: center">
+    <j-input-color v-model="value1" only-button />
+    <j-input-color v-model="value2" only-button size="small" />
+    <j-input-color v-model="value3" only-button size="large" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+</script>

package/docs/examples/input-color/predefine.vue

@@ -1,31 +1,31 @@
-<template>
-  <j-input-color
-    v-model="value"
-    :predefine-colors="predefineColors"
-    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('')
-const predefineColors = [
-  '#ff4500',
-  '#ff8c00',
-  '#ffd700',
-  '#90ee90',
-  '#00ced1',
-  '#1e90ff',
-  '#c71585',
-  'rgba(255, 69, 0, 0.68)',
-  'rgb(255, 120, 0)',
-  'hsv(51, 100, 98)',
-  'hsva(120, 40, 94, 0.5)',
-  'hsl(181, 100%, 37%)',
-  'hsla(209, 100%, 56%, 0.73)',
-  '#c7158577',
-]
-</script>
+<template>
+  <j-input-color
+    v-model="value"
+    :predefine-colors="predefineColors"
+    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('')
+const predefineColors = [
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  'rgba(255, 69, 0, 0.68)',
+  'rgb(255, 120, 0)',
+  'hsv(51, 100, 98)',
+  'hsva(120, 40, 94, 0.5)',
+  'hsl(181, 100%, 37%)',
+  'hsla(209, 100%, 56%, 0.73)',
+  '#c7158577',
+]
+</script>

package/docs/examples/input-color/size.vue

@@ -1,15 +1,15 @@
-<template>
-  <div style="display: flex; gap: 16px; align-items: center">
-    <j-input-color v-model="value1" size="large" placeholder="large" />
-    <j-input-color v-model="value2" size="default" placeholder="default" />
-    <j-input-color v-model="value3" size="small" placeholder="small" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-const value3 = ref('')
-</script>
+<template>
+  <div style="display: flex; gap: 16px; align-items: center">
+    <j-input-color v-model="value1" size="large" placeholder="large" />
+    <j-input-color v-model="value2" size="default" placeholder="default" />
+    <j-input-color v-model="value3" size="small" placeholder="small" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+</script>