@a2simcode/ui 0.0.71 → 0.0.72

package/docs/examples/select/group.vue

@@ -1,23 +1,23 @@
-<template>
-  <j-select
-    v-model="value"
-    :options="options"
-    is-group
-    group-key="group"
-    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 options = [
-  { label: '选项1', value: '1', group: '分组1' },
-  { label: '选项2', value: '2', group: '分组1' },
-  { label: '选项3', value: '3', group: '分组2' },
-  { label: '选项4', value: '4', group: '分组2' },
-]
-</script>
+<template>
+  <j-select
+    v-model="value"
+    :options="options"
+    is-group
+    group-key="group"
+    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 options = [
+  { label: '选项1', value: '1', group: '分组1' },
+  { label: '选项2', value: '2', group: '分组1' },
+  { label: '选项3', value: '3', group: '分组2' },
+  { label: '选项4', value: '4', group: '分组2' },
+]
+</script>

package/docs/examples/select/icon.vue

@@ -1,16 +1,16 @@
-<template>
-  <j-select v-model="value" :options="options" 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 options = [
-  { label: '选项1', value: '1', icon: 'mdi:home' },
-  { label: '选项2', value: '2', icon: 'mdi:account' },
-  { label: '选项3', value: '3', icon: 'mdi:settings' },
-  { label: '选项4', value: '4', icon: 'mdi:email' },
-]
-</script>
+<template>
+  <j-select v-model="value" :options="options" 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 options = [
+  { label: '选项1', value: '1', icon: 'mdi:home' },
+  { label: '选项2', value: '2', icon: 'mdi:account' },
+  { label: '选项3', value: '3', icon: 'mdi:settings' },
+  { label: '选项4', value: '4', icon: 'mdi:email' },
+]
+</script>

package/docs/examples/select/multiple.vue

@@ -1,18 +1,18 @@
-<template>
-  <j-select v-model="value" :options="options" multiple placeholder="多选" style="width: 300px" />
-  <p v-if="value && value.length > 0" style="margin-top: 12px; color: #606266">
-    选中的值: {{ value }}
-  </p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref<string>('')
-const options = [
-  { label: '选项1', value: '1' },
-  { label: '选项2', value: '2' },
-  { label: '选项3', value: '3' },
-  { label: '选项4', value: '4' },
-]
-</script>
+<template>
+  <j-select v-model="value" :options="options" multiple placeholder="多选" style="width: 300px" />
+  <p v-if="value && value.length > 0" style="margin-top: 12px; color: #606266">
+    选中的值: {{ value }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref<string>('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+  { label: '选项4', value: '4' },
+]
+</script>

package/docs/examples/select/size.vue

@@ -1,39 +1,39 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <j-select
-      v-model="value1"
-      :options="options"
-      size="large"
-      placeholder="大尺寸"
-      style="width: 300px"
-    />
-    <j-select
-      v-model="value2"
-      :options="options"
-      size="default"
-      placeholder="默认尺寸"
-      style="width: 300px"
-    />
-    <j-select
-      v-model="value3"
-      :options="options"
-      size="small"
-      placeholder="小尺寸"
-      style="width: 300px"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-const value3 = ref('')
-const options = [
-  { label: '选项1', value: '1' },
-  { label: '选项2', value: '2' },
-  { label: '选项3', value: '3' },
-  { label: '选项4', value: '4' },
-]
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-select
+      v-model="value1"
+      :options="options"
+      size="large"
+      placeholder="大尺寸"
+      style="width: 300px"
+    />
+    <j-select
+      v-model="value2"
+      :options="options"
+      size="default"
+      placeholder="默认尺寸"
+      style="width: 300px"
+    />
+    <j-select
+      v-model="value3"
+      :options="options"
+      size="small"
+      placeholder="小尺寸"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+  { label: '选项4', value: '4' },
+]
+</script>

package/docs/examples/slider/basic.vue

@@ -1,42 +1,42 @@
-<template>
-  <div class="slider-demo">
-    <div class="demo-item">
-      <p>Basic usage</p>
-      <j-slider v-model="value1" />
-    </div>
-    <div class="demo-item">
-      <p>Discrete values</p>
-      <j-slider v-model="value2" :step="10" show-stops />
-    </div>
-    <div class="demo-item">
-      <p>With input box</p>
-      <j-slider v-model="value3" show-input />
-    </div>
-    <div class="demo-item">
-      <p>Range selection</p>
-      <j-slider v-model="value4" range :max="50" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(38)
-const value2 = ref(0)
-const value3 = ref(0)
-const value4 = ref([4, 15])
-</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>Basic usage</p>
+      <j-slider v-model="value1" />
+    </div>
+    <div class="demo-item">
+      <p>Discrete values</p>
+      <j-slider v-model="value2" :step="10" show-stops />
+    </div>
+    <div class="demo-item">
+      <p>With input box</p>
+      <j-slider v-model="value3" show-input />
+    </div>
+    <div class="demo-item">
+      <p>Range selection</p>
+      <j-slider v-model="value4" range :max="50" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(38)
+const value2 = ref(0)
+const value3 = ref(0)
+const value4 = ref([4, 15])
+</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/disabled.vue

@@ -1,17 +1,17 @@
-<template>
-  <div class="slider-demo">
-    <j-slider v-model="value" readonly />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref(50)
-</script>
-
-<style scoped>
-.slider-demo {
-  padding: 20px 0;
-}
-</style>
+<template>
+  <div class="slider-demo">
+    <j-slider v-model="value" readonly />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(50)
+</script>
+
+<style scoped>
+.slider-demo {
+  padding: 20px 0;
+}
+</style>

package/docs/examples/slider/marks.vue

@@ -1,30 +1,30 @@
-<template>
-  <div class="slider-demo">
-    <j-slider v-model="value" :marks="marks" :step="10" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref(30)
-const marks = {
-  0: '0°C',
-  20: '20°C',
-  40: '40°C',
-  60: '60°C',
-  80: '80°C',
-  100: {
-    style: {
-      color: '#f50',
-    },
-    label: '100°C',
-  },
-}
-</script>
-
-<style scoped>
-.slider-demo {
-  padding: 20px 0;
-}
-</style>
+<template>
+  <div class="slider-demo">
+    <j-slider v-model="value" :marks="marks" :step="10" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(30)
+const marks = {
+  0: '0°C',
+  20: '20°C',
+  40: '40°C',
+  60: '60°C',
+  80: '80°C',
+  100: {
+    style: {
+      color: '#f50',
+    },
+    label: '100°C',
+  },
+}
+</script>
+
+<style scoped>
+.slider-demo {
+  padding: 20px 0;
+}
+</style>

package/docs/examples/slider/size.vue

@@ -1,37 +1,37 @@
-<template>
-  <div class="slider-demo">
-    <div class="demo-item">
-      <p>Large</p>
-      <j-slider v-model="value1" size="large" show-input />
-    </div>
-    <div class="demo-item">
-      <p>Default</p>
-      <j-slider v-model="value2" show-input />
-    </div>
-    <div class="demo-item">
-      <p>Small</p>
-      <j-slider v-model="value3" size="small" show-input />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref(50)
-const value2 = ref(50)
-const value3 = ref(50)
-</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>Large</p>
+      <j-slider v-model="value1" size="large" show-input />
+    </div>
+    <div class="demo-item">
+      <p>Default</p>
+      <j-slider v-model="value2" show-input />
+    </div>
+    <div class="demo-item">
+      <p>Small</p>
+      <j-slider v-model="value3" size="small" show-input />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(50)
+const value2 = ref(50)
+const value3 = ref(50)
+</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/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>