@a2simcode/ui 0.0.55 → 0.0.57

package/docs/examples/select/clearable.vue

@@ -1,22 +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>
+<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

@@ -1,31 +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>
+<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

@@ -1,24 +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>
+<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

@@ -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>