@a2simcode/ui 0.0.46 → 0.0.48

package/docs/examples/radio/disabled.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" :readonly="true" />
+    <p style="margin-top: 12px; color: #909399">单选框已禁用</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('1')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+]
+</script>

package/docs/examples/radio/size.vue

@@ -0,0 +1,29 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 20px">
+    <div>
+      <p style="margin-bottom: 8px; color: #606266">Large</p>
+      <j-radio v-model="value1" :options="options" size="large" />
+    </div>
+    <div>
+      <p style="margin-bottom: 8px; color: #606266">Default</p>
+      <j-radio v-model="value2" :options="options" size="default" />
+    </div>
+    <div>
+      <p style="margin-bottom: 8px; color: #606266">Small</p>
+      <j-radio v-model="value3" :options="options" size="small" />
+    </div>
+  </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' },
+]
+</script>

package/docs/examples/rate/basic.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="rate-demo">
+    <j-rate v-model="value" />
+    <div class="demo-result">Value: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(3)
+</script>
+
+<style scoped>
+.rate-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.demo-result {
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/rate/half.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="rate-demo">
+    <j-rate v-model="value" allow-half />
+    <div class="demo-result">Value: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(2.5)
+</script>
+
+<style scoped>
+.rate-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.demo-result {
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/rate/readonly.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="rate-demo">
+    <j-rate v-model="value" readonly />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(3.5)
+</script>

package/docs/examples/rate/text.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="rate-demo">
+    <div class="demo-item">
+      <p>Show Text</p>
+      <j-rate v-model="value1" show-text />
+    </div>
+    <div class="demo-item">
+      <p>Show Score</p>
+      <j-rate v-model="value2" show-score />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(3)
+const value2 = ref(4.5)
+</script>
+
+<style scoped>
+.rate-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #666;
+}
+</style>

package/docs/examples/select/basic.vue

@@ -0,0 +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' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+  { label: '选项4', value: '4' },
+]
+</script>

package/docs/examples/select/clearable.vue

@@ -0,0 +1,22 @@
+<template>
+  <j-select
+    v-model="value"
+    :options="options"
+    clearable
+    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('1')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+  { label: '选项4', value: '4' },
+]
+</script>

package/docs/examples/select/disabled.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-select
+      v-model="value1"
+      :options="options"
+      disabled
+      placeholder="禁用状态"
+      style="width: 300px"
+    />
+    <j-select
+      v-model="value2"
+      :options="options"
+      readonly
+      placeholder="只读状态"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+  { label: '选项4', value: '4' },
+]
+</script>

package/docs/examples/select/filterable.vue

@@ -0,0 +1,24 @@
+<template>
+  <j-select
+    v-model="value"
+    :options="options"
+    filterable
+    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' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+  { label: '选项4', value: '4' },
+  { label: '选项5', value: '5' },
+  { label: '选项6', value: '6' },
+]
+</script>

package/docs/examples/select/group.vue

@@ -0,0 +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>

package/docs/examples/select/icon.vue

@@ -0,0 +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>

package/docs/examples/select/multiple.vue

@@ -0,0 +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>

package/docs/examples/select/size.vue

@@ -0,0 +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>

package/docs/examples/slider/basic.vue

@@ -0,0 +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>

package/docs/examples/slider/disabled.vue

@@ -0,0 +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>

package/docs/examples/slider/marks.vue

@@ -0,0 +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>

package/docs/examples/slider/size.vue

@@ -0,0 +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>

package/docs/examples/slider/tooltip.vue

@@ -0,0 +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>

package/docs/examples/slider/vertical.vue

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

package/docs/examples/switch/basic.vue

@@ -0,0 +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>

package/docs/examples/switch/disabled.vue

@@ -0,0 +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>

package/docs/examples/switch/loading.vue

@@ -0,0 +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>