@a2simcode/ui 0.0.54 → 0.0.56

package/docs/examples/buttons/size.vue

@@ -1,45 +1,45 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <div>
-      <div style="margin-bottom: 8px; color: #666">Large:</div>
-      <j-buttons :list="buttonList" size="large" />
-    </div>
-    <div>
-      <div style="margin-bottom: 8px; color: #666">Default:</div>
-      <j-buttons :list="buttonList" size="default" />
-    </div>
-    <div>
-      <div style="margin-bottom: 8px; color: #666">Small:</div>
-      <j-buttons :list="buttonList" size="small" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const buttonList = ref([
-  {
-    id: 'add',
-    label: '新增',
-    config: {
-      type: 'primary',
-      icon: 'material-symbols-light:add',
-    },
-    click: () => {
-      ElMessage.success('点击了新增按钮')
-    },
-  },
-  {
-    id: 'edit',
-    label: '编辑',
-    config: {
-      icon: 'material-symbols-light:edit-outline',
-    },
-    click: () => {
-      ElMessage.info('点击了编辑按钮')
-    },
-  },
-])
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Large:</div>
+      <j-buttons :list="buttonList" size="large" />
+    </div>
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Default:</div>
+      <j-buttons :list="buttonList" size="default" />
+    </div>
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Small:</div>
+      <j-buttons :list="buttonList" size="small" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const buttonList = ref([
+  {
+    id: 'add',
+    label: '新增',
+    config: {
+      type: 'primary',
+      icon: 'material-symbols-light:add',
+    },
+    click: () => {
+      ElMessage.success('点击了新增按钮')
+    },
+  },
+  {
+    id: 'edit',
+    label: '编辑',
+    config: {
+      icon: 'material-symbols-light:edit-outline',
+    },
+    click: () => {
+      ElMessage.info('点击了编辑按钮')
+    },
+  },
+])
+</script>

package/docs/examples/cascader-select/basic.vue

@@ -1,28 +1,28 @@
-<template>
-  <j-cascader-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: '地区',
-    value: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-    ],
-  },
-]
-</script>
+<template>
+  <j-cascader-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: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/clearable.vue

@@ -1,34 +1,34 @@
-<template>
-  <j-cascader-select
-    v-model="value"
-    :options="options"
-    placeholder="支持清除"
-    style="width: 300px"
-    clearable
-  />
-  <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: '地区',
-    value: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-    ],
-  },
-]
-</script>
+<template>
+  <j-cascader-select
+    v-model="value"
+    :options="options"
+    placeholder="支持清除"
+    style="width: 300px"
+    clearable
+  />
+  <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: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/disabled.vue

@@ -1,43 +1,43 @@
-<template>
-  <div>
-    <j-cascader-select
-      v-model="value1"
-      :options="options"
-      placeholder="禁用状态"
-      style="width: 300px; margin-right: 12px"
-      disabled
-    />
-    <j-cascader-select
-      v-model="value2"
-      :options="options"
-      placeholder="只读状态"
-      style="width: 300px"
-      readonly
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('department,tech')
-const options = [
-  {
-    label: '地区',
-    value: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-    ],
-  },
-]
-</script>
+<template>
+  <div>
+    <j-cascader-select
+      v-model="value1"
+      :options="options"
+      placeholder="禁用状态"
+      style="width: 300px; margin-right: 12px"
+      disabled
+    />
+    <j-cascader-select
+      v-model="value2"
+      :options="options"
+      placeholder="只读状态"
+      style="width: 300px"
+      readonly
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('department,tech')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/filterable.vue

@@ -1,37 +1,37 @@
-<template>
-  <j-cascader-select
-    v-model="value"
-    :options="options"
-    placeholder="支持搜索"
-    style="width: 300px"
-    filterable
-  />
-  <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: '地区',
-    value: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-      { label: '深圳', value: 'shenzhen' },
-      { label: '广州', value: 'guangzhou' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-      { label: '运营部', value: 'operation' },
-    ],
-  },
-]
-</script>
+<template>
+  <j-cascader-select
+    v-model="value"
+    :options="options"
+    placeholder="支持搜索"
+    style="width: 300px"
+    filterable
+  />
+  <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: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+      { label: '深圳', value: 'shenzhen' },
+      { label: '广州', value: 'guangzhou' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+      { label: '运营部', value: 'operation' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/methods.vue

@@ -1,84 +1,84 @@
-<template>
-  <div>
-    <div style="margin-bottom: 20px">
-      <j-cascader-select
-        ref="cascaderRef"
-        v-model="value"
-        :options="options"
-        placeholder="请选择"
-        style="width: 300px"
-      />
-    </div>
-
-    <div style="margin-top: 20px">
-      <el-button @click="handleGetChecked">获取选中节点</el-button>
-      <el-button @click="handleClear">清空选中</el-button>
-    </div>
-
-    <div
-      v-if="checkedNodes.length > 0"
-      style="margin-top: 12px; padding: 12px; background: #f0f9ff; border-radius: 4px"
-    >
-      <p style="color: #606266; margin: 0 0 8px 0"><strong>当前选中节点：</strong></p>
-      <div
-        v-for="(node, index) in checkedNodes"
-        :key="index"
-        style="color: #606266; margin-bottom: 8px"
-      >
-        <div>{{ getNodeLabel(node) }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const cascaderRef = ref()
-const value = ref('')
-const checkedNodes = ref([])
-
-const options = [
-  {
-    label: '地区',
-    value: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-    ],
-  },
-]
-
-const getNodeLabel = (node: any) => {
-  // 提取节点的关键信息，避免循环引用
-  if (Array.isArray(node)) {
-    return node.map((n) => n?.label || n?.value || '未知').join(' / ')
-  }
-  return node?.label || node?.value || '未知'
-}
-
-const handleGetChecked = () => {
-  const nodes = cascaderRef.value?.getCheckedNodes(false) || []
-  // 将对象转换为可序列化的格式
-  checkedNodes.value = nodes.map((node: any) => {
-    if (Array.isArray(node)) {
-      return node.map((n) => ({ label: n?.label, value: n?.value }))
-    }
-    return { label: node?.label, value: node?.value }
-  })
-}
-
-const handleClear = () => {
-  cascaderRef.value?.clearCheckedNodes()
-  checkedNodes.value = []
-  value.value = ''
-}
-</script>
+<template>
+  <div>
+    <div style="margin-bottom: 20px">
+      <j-cascader-select
+        ref="cascaderRef"
+        v-model="value"
+        :options="options"
+        placeholder="请选择"
+        style="width: 300px"
+      />
+    </div>
+
+    <div style="margin-top: 20px">
+      <el-button @click="handleGetChecked">获取选中节点</el-button>
+      <el-button @click="handleClear">清空选中</el-button>
+    </div>
+
+    <div
+      v-if="checkedNodes.length > 0"
+      style="margin-top: 12px; padding: 12px; background: #f0f9ff; border-radius: 4px"
+    >
+      <p style="color: #606266; margin: 0 0 8px 0"><strong>当前选中节点：</strong></p>
+      <div
+        v-for="(node, index) in checkedNodes"
+        :key="index"
+        style="color: #606266; margin-bottom: 8px"
+      >
+        <div>{{ getNodeLabel(node) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const cascaderRef = ref()
+const value = ref('')
+const checkedNodes = ref([])
+
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+
+const getNodeLabel = (node: any) => {
+  // 提取节点的关键信息，避免循环引用
+  if (Array.isArray(node)) {
+    return node.map((n) => n?.label || n?.value || '未知').join(' / ')
+  }
+  return node?.label || node?.value || '未知'
+}
+
+const handleGetChecked = () => {
+  const nodes = cascaderRef.value?.getCheckedNodes(false) || []
+  // 将对象转换为可序列化的格式
+  checkedNodes.value = nodes.map((node: any) => {
+    if (Array.isArray(node)) {
+      return node.map((n) => ({ label: n?.label, value: n?.value }))
+    }
+    return { label: node?.label, value: node?.value }
+  })
+}
+
+const handleClear = () => {
+  cascaderRef.value?.clearCheckedNodes()
+  checkedNodes.value = []
+  value.value = ''
+}
+</script>

package/docs/examples/cascader-select/multiple.vue

@@ -1,38 +1,38 @@
-<template>
-  <div>
-    <j-cascader-select
-      v-model="value"
-      :options="options"
-      placeholder="请选择（支持多选）"
-      :multiple="true"
-      style="width: 300px"
-    />
-    <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: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-      { label: '广州', value: 'guangzhou' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-      { label: '人事部', value: 'hr' },
-    ],
-  },
-]
-</script>
+<template>
+  <div>
+    <j-cascader-select
+      v-model="value"
+      :options="options"
+      placeholder="请选择（支持多选）"
+      :multiple="true"
+      style="width: 300px"
+    />
+    <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: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+      { label: '广州', value: 'guangzhou' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+      { label: '人事部', value: 'hr' },
+    ],
+  },
+]
+</script>