@a2simcode/ui 0.0.55 → 0.0.56

package/docs/examples/slider/tooltip.vue

@@ -1,36 +1,36 @@
-<template>
-  <div class="slider-demo">
-    <div class="demo-item">
-      <p>自定义提示</p>
-      <j-slider v-model="value1" :format-tooltip="formatTooltip" />
-    </div>
-    <div class="demo-item">
-      <p>隐藏提示</p>
-      <j-slider v-model="value2" :show-tooltip="false" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(48)
-const value2 = ref(60)
-
-const formatTooltip = (val: number) => {
-  return `${val}%`
-}
-</script>
-
-<style scoped>
-.slider-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-.demo-item p {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: #666;
-}
-</style>
+<template>
+  <div class="slider-demo">
+    <div class="demo-item">
+      <p>自定义提示</p>
+      <j-slider v-model="value1" :format-tooltip="formatTooltip" />
+    </div>
+    <div class="demo-item">
+      <p>隐藏提示</p>
+      <j-slider v-model="value2" :show-tooltip="false" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(48)
+const value2 = ref(60)
+
+const formatTooltip = (val: number) => {
+  return `${val}%`
+}
+</script>
+
+<style scoped>
+.slider-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/slider/vertical.vue

@@ -1,26 +1,26 @@
-<template>
-  <div class="slider-demo">
-    <div class="demo-vertical">
-      <j-slider v-model="value1" vertical height="200px" />
-      <j-slider v-model="value2" vertical height="200px" range />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(36)
-const value2 = ref([10, 50])
-</script>
-
-<style scoped>
-.slider-demo {
-  padding: 20px 0;
-}
-.demo-vertical {
-  display: flex;
-  gap: 40px;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="slider-demo">
+    <div class="demo-vertical">
+      <j-slider v-model="value1" vertical height="200px" />
+      <j-slider v-model="value2" vertical height="200px" range />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(36)
+const value2 = ref([10, 50])
+</script>
+
+<style scoped>
+.slider-demo {
+  padding: 20px 0;
+}
+.demo-vertical {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+}
+</style>

package/docs/examples/slider-captcha/basic.vue

@@ -1,44 +1,44 @@
-<template>
-  <div class="slider-captcha-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-slider-captcha v-model="isPassing1" />
-      <p class="status">验证状态: {{ isPassing1 ? '已通过' : '未通过' }}</p>
-    </div>
-    <div class="demo-item">
-      <p>自定义文字</p>
-      <j-slider-captcha
-        v-model="isPassing2"
-        text="向右拖动滑块完成验证"
-        success-text="验证成功！"
-      />
-      <p class="status">验证状态: {{ isPassing2 ? '已通过' : '未通过' }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const isPassing1 = ref(false)
-const isPassing2 = ref(false)
-</script>
-
-<style scoped>
-.slider-captcha-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-.demo-item p {
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: #666;
-}
-.demo-item .status {
-  margin-top: 12px;
-  margin-bottom: 0;
-  font-size: 13px;
-  color: #999;
-}
-</style>
+<template>
+  <div class="slider-captcha-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-slider-captcha v-model="isPassing1" />
+      <p class="status">验证状态: {{ isPassing1 ? '已通过' : '未通过' }}</p>
+    </div>
+    <div class="demo-item">
+      <p>自定义文字</p>
+      <j-slider-captcha
+        v-model="isPassing2"
+        text="向右拖动滑块完成验证"
+        success-text="验证成功！"
+      />
+      <p class="status">验证状态: {{ isPassing2 ? '已通过' : '未通过' }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isPassing1 = ref(false)
+const isPassing2 = ref(false)
+</script>
+
+<style scoped>
+.slider-captcha-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.demo-item p {
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #666;
+}
+.demo-item .status {
+  margin-top: 12px;
+  margin-bottom: 0;
+  font-size: 13px;
+  color: #999;
+}
+</style>

package/docs/examples/slider-captcha/custom.vue

@@ -1,48 +1,48 @@
-<template>
-  <div class="slider-captcha-demo">
-    <div class="demo-item">
-      <p>自定义颜色样式</p>
-      <j-slider-captcha
-        v-model="isPassing1"
-        :bar-style="{ background: 'linear-gradient(to right, #667eea 0%, #764ba2 100%)' }"
-        :action-style="{ background: '#667eea' }"
-      />
-    </div>
-    <div class="demo-item">
-      <p>自定义尺寸</p>
-      <j-slider-captcha
-        v-model="isPassing2"
-        :wrapper-style="{ height: '50px', borderRadius: '25px' }"
-        :action-style="{ width: '50px', height: '50px', borderRadius: '50%' }"
-      />
-    </div>
-    <div class="demo-item">
-      <p>自定义边框样式</p>
-      <j-slider-captcha
-        v-model="isPassing3"
-        :wrapper-style="{ border: '2px dashed #409eff', borderRadius: '8px' }"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const isPassing1 = ref(false)
-const isPassing2 = ref(false)
-const isPassing3 = ref(false)
-</script>
-
-<style scoped>
-.slider-captcha-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-.demo-item p {
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: #666;
-}
-</style>
+<template>
+  <div class="slider-captcha-demo">
+    <div class="demo-item">
+      <p>自定义颜色样式</p>
+      <j-slider-captcha
+        v-model="isPassing1"
+        :bar-style="{ background: 'linear-gradient(to right, #667eea 0%, #764ba2 100%)' }"
+        :action-style="{ background: '#667eea' }"
+      />
+    </div>
+    <div class="demo-item">
+      <p>自定义尺寸</p>
+      <j-slider-captcha
+        v-model="isPassing2"
+        :wrapper-style="{ height: '50px', borderRadius: '25px' }"
+        :action-style="{ width: '50px', height: '50px', borderRadius: '50%' }"
+      />
+    </div>
+    <div class="demo-item">
+      <p>自定义边框样式</p>
+      <j-slider-captcha
+        v-model="isPassing3"
+        :wrapper-style="{ border: '2px dashed #409eff', borderRadius: '8px' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isPassing1 = ref(false)
+const isPassing2 = ref(false)
+const isPassing3 = ref(false)
+</script>
+
+<style scoped>
+.slider-captcha-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.demo-item p {
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/switch/basic.vue

@@ -1,16 +1,16 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <j-switch v-model="value1" />
-    <j-switch
-      v-model="value2"
-      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(true)
-const value2 = ref(true)
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-switch v-model="value1" />
+    <j-switch
+      v-model="value2"
+      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(true)
+const value2 = ref(true)
+</script>

package/docs/examples/switch/disabled.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <j-switch v-model="value1" disabled />
-    <j-switch v-model="value2" readonly />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(true)
-const value2 = ref(false)
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-switch v-model="value1" disabled />
+    <j-switch v-model="value2" readonly />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(true)
+const value2 = ref(false)
+</script>

package/docs/examples/switch/loading.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <j-switch v-model="value1" loading />
-    <j-switch v-model="value2" loading />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(true)
-const value2 = ref(false)
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-switch v-model="value1" loading />
+    <j-switch v-model="value2" loading />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(true)
+const value2 = ref(false)
+</script>

package/docs/examples/switch/size.vue

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

package/docs/examples/switch/text.vue

@@ -1,13 +1,13 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <j-switch v-model="value1" active-text="开" inactive-text="关" />
-    <j-switch v-model="value2" inline-prompt active-text="开启" inactive-text="关闭" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(true)
-const value2 = ref(false)
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-switch v-model="value1" active-text="开" inactive-text="关" />
+    <j-switch v-model="value2" inline-prompt active-text="开启" inactive-text="关闭" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(true)
+const value2 = ref(false)
+</script>