@a2simcode/ui 0.0.186 → 0.0.187

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>

package/docs/examples/layer/custom-buttons.vue

@@ -1,61 +1,61 @@
-<template>
-  <div>
-    <j-button label="自定义按钮" @click="openLayer" />
-    <j-layer
-      ref="layerRef"
-      :buttons="customButtons"
-      :has-save-btn="false"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <div style="padding: 16px">
-        <p>这是自定义按钮的示例。</p>
-        <p>可以通过 buttons 属性配置自定义按钮。</p>
-        <p>设置 has-save-btn 为 false 可以隐藏默认的保存按钮。</p>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const customButtons = [
-  {
-    label: '重置',
-    btnType: 'default',
-    onClick: () => {
-      console.log('点击重置')
-    },
-  },
-  {
-    label: '提交',
-    btnType: 'primary',
-    onClick: (showLoading: any, hideLoading: any) => {
-      showLoading('提交中...')
-      setTimeout(() => {
-        hideLoading()
-        layerRef.value.close()
-      }, 1000)
-    },
-  },
-]
-
-const openLayer = () => {
-  layerRef.value.open('自定义按钮示例', 'modal')
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1000)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="自定义按钮" @click="openLayer" />
+    <j-layer
+      ref="layerRef"
+      :buttons="customButtons"
+      :has-save-btn="false"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是自定义按钮的示例。</p>
+        <p>可以通过 buttons 属性配置自定义按钮。</p>
+        <p>设置 has-save-btn 为 false 可以隐藏默认的保存按钮。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const customButtons = [
+  {
+    label: '重置',
+    btnType: 'default',
+    onClick: () => {
+      console.log('点击重置')
+    },
+  },
+  {
+    label: '提交',
+    btnType: 'primary',
+    onClick: (showLoading: any, hideLoading: any) => {
+      showLoading('提交中...')
+      setTimeout(() => {
+        hideLoading()
+        layerRef.value.close()
+      }, 1000)
+    },
+  },
+]
+
+const openLayer = () => {
+  layerRef.value.open('自定义按钮示例', 'modal')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/drawer.vue

@@ -1,37 +1,37 @@
-<template>
-  <div>
-    <j-button label="打开抽屉" @click="openLayer" />
-    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
-      <div style="padding: 16px">
-        <h3>抽屉模式示例</h3>
-        <p>抽屉从右侧滑出，适合展示详情或表单。</p>
-        <div style="margin-top: 20px">
-          <p>可以在抽屉中放置任意内容。</p>
-          <p>支持自定义按钮和回调处理。</p>
-        </div>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openLayer = () => {
-  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="打开抽屉" @click="openLayer" />
+    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <h3>抽屉模式示例</h3>
+        <p>抽屉从右侧滑出，适合展示详情或表单。</p>
+        <div style="margin-top: 20px">
+          <p>可以在抽屉中放置任意内容。</p>
+          <p>支持自定义按钮和回调处理。</p>
+        </div>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('抽屉示例', 'drawer')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('提交中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/full.vue

@@ -1,38 +1,38 @@
-<template>
-  <div>
-    <j-button label="打开全屏" @click="openLayer" />
-    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
-      <div style="padding: 16px">
-        <h3>全屏模式示例</h3>
-        <p>全屏模式会占据整个浏览器窗口。</p>
-        <p>适用于需要大量展示内容的场景。</p>
-        <div style="margin-top: 20px">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-          <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-        </div>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openLayer = () => {
-  layerRef.value.open('全屏示例', 'full')
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1500)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开全屏" @click="openLayer" />
+    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <h3>全屏模式示例</h3>
+        <p>全屏模式会占据整个浏览器窗口。</p>
+        <p>适用于需要大量展示内容的场景。</p>
+        <div style="margin-top: 20px">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('全屏示例', 'full')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1500)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/modal.vue

@@ -1,34 +1,34 @@
-<template>
-  <div>
-    <j-button label="打开弹窗" @click="openLayer" />
-    <j-layer ref="layerRef" :width="800" :height="500" @ok="handleOk" @cancel="handleCancel">
-      <div style="padding: 16px">
-        <p>这是弹窗模式的示例。</p>
-        <p>可以通过 width 和 height 属性设置弹窗大小。</p>
-        <p>弹窗支持拖拽和缩放功能。</p>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openLayer = () => {
-  layerRef.value.open('弹窗示例', 'modal')
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('处理中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1000)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开弹窗" @click="openLayer" />
+    <j-layer ref="layerRef" :width="800" :height="500" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <p>这是弹窗模式的示例。</p>
+        <p>可以通过 width 和 height 属性设置弹窗大小。</p>
+        <p>弹窗支持拖拽和缩放功能。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('弹窗示例', 'modal')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('处理中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/steps.vue

@@ -1,46 +1,46 @@
-<template>
-  <div>
-    <j-button label="打开步骤弹窗" @click="openLayer" />
-    <j-layer
-      ref="layerRef"
-      :is-step="true"
-      :steps="['基本信息', '详细配置', '确认提交']"
-      :validate-steps="validateSteps"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <div style="padding: 16px">
-        <p>这是带步骤条的 Layer 组件示例。</p>
-        <p>适用于多步骤表单或向导式流程。</p>
-        <p>可以配置步骤校验函数。</p>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openLayer = () => {
-  layerRef.value.open('步骤弹窗示例', 'modal')
-}
-
-const validateSteps = (step: number) => {
-  console.log('校验步骤:', step)
-  return true
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('提交中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1000)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开步骤弹窗" @click="openLayer" />
+    <j-layer
+      ref="layerRef"
+      :is-step="true"
+      :steps="['基本信息', '详细配置', '确认提交']"
+      :validate-steps="validateSteps"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是带步骤条的 Layer 组件示例。</p>
+        <p>适用于多步骤表单或向导式流程。</p>
+        <p>可以配置步骤校验函数。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('步骤弹窗示例', 'modal')
+}
+
+const validateSteps = (step: number) => {
+  console.log('校验步骤:', step)
+  return true
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('提交中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>