@a2simcode/ui 0.0.71 → 0.0.72

package/docs/examples/panel/tool-buttons.vue

@@ -1,18 +1,18 @@
-<template>
-  <j-panel title="Panel with Tool Buttons"
-    :toolBtns="[
-      { id: 'edit',label: '编辑', config: { icon: 'mdi:settings-outline' }, click: handleEdit },
-    ]"
-  >
-    <div>This panel has some tool buttons in the header.</div>
-  </j-panel>
-</template>
-
-<script setup lang="ts">
-import JPanel from '../../../packages/components/panel'
-import { ElMessage } from 'element-plus'
-
-const handleEdit = () => {
-  ElMessage.success('Edit button clicked!')
-}
-</script>
+<template>
+  <j-panel title="Panel with Tool Buttons"
+    :toolBtns="[
+      { id: 'edit',label: '编辑', config: { icon: 'mdi:settings-outline' }, click: handleEdit },
+    ]"
+  >
+    <div>This panel has some tool buttons in the header.</div>
+  </j-panel>
+</template>
+
+<script setup lang="ts">
+import JPanel from '../../../packages/components/panel'
+import { ElMessage } from 'element-plus'
+
+const handleEdit = () => {
+  ElMessage.success('Edit button clicked!')
+}
+</script>

package/docs/examples/radio/basic.vue

@@ -1,17 +1,17 @@
-<template>
-  <div>
-    <j-radio v-model="value" :options="options" />
-    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
-  </div>
-</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' },
-]
-</script>
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" />
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</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' },
+]
+</script>

package/docs/examples/radio/button.vue

@@ -1,17 +1,17 @@
-<template>
-  <div>
-    <j-radio v-model="value" :options="options" :is-button="true" />
-    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
-  </div>
-</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' },
-]
-</script>
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" :is-button="true" />
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</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' },
+]
+</script>

package/docs/examples/radio/color.vue

@@ -1,18 +1,18 @@
-<template>
-  <div>
-    <j-radio v-model="value" :options="options" :is-color="true" :colors="colors" />
-    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-const options = [
-  { label: '红色', value: 'red' },
-  { label: '绿色', value: 'green' },
-  { label: '蓝色', value: 'blue' },
-]
-const colors = ['#f53f3f', '#00b42a', '#165dff']
-</script>
+<template>
+  <div>
+    <j-radio v-model="value" :options="options" :is-color="true" :colors="colors" />
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  { label: '红色', value: 'red' },
+  { label: '绿色', value: 'green' },
+  { label: '蓝色', value: 'blue' },
+]
+const colors = ['#f53f3f', '#00b42a', '#165dff']
+</script>

package/docs/examples/radio/disabled.vue

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

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

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

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

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

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

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

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>