@a2simcode/ui 0.0.131 → 0.0.133

package/docs/components/upload.md

@@ -1,117 +1,117 @@
-# Upload 上传
-
-通过点击或者拖拽上传文件。
-
-## 基础用法
-
-最基本的上传组件。
-
-<Demo :source-code="uploadBasicCode">
-  <template #source>
-    <upload-basic />
-  </template>
-  <template #description>
-    使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
-  </template>
-</Demo>
-
-## 多文件上传
-
-支持一次性选择多个文件进行上传。
-
-<Demo :source-code="uploadMultipleCode">
-  <template #source>
-    <upload-multiple />
-  </template>
-  <template #description>
-    设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量，设置为 `-1` 表示不限制。
-  </template>
-</Demo>
-
-## 拖拽上传
-
-支持拖拽文件到指定区域进行上传。
-
-<Demo :source-code="uploadDragCode">
-  <template #source>
-    <upload-drag />
-  </template>
-  <template #description>
-    设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
-  </template>
-</Demo>
-
-## 图片上传
-
-专门用于上传图片的模式，提供图片预览功能。
-
-<Demo :source-code="uploadImageCode">
-  <template #source>
-    <upload-image />
-  </template>
-  <template #description>
-    设置 `is-upload-img` 属性为 `true` 启用图片上传模式，会以卡片形式展示上传的图片。
-  </template>
-</Demo>
-
-## 限制上传数量和大小
-
-可以限制上传文件的数量和大小。
-
-<Demo :source-code="uploadLimitCode">
-  <template #source>
-    <upload-limit />
-  </template>
-  <template #description>
-    使用 `limit` 属性限制上传数量，`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
-  </template>
-</Demo>
-
-## 文件类型限制
-
-限制上传的文件类型。
-
-<Demo :source-code="uploadAcceptCode">
-  <template #source>
-    <upload-accept />
-  </template>
-  <template #description>
-    使用 `accept` 属性指定接受的文件类型，例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
-  </template>
-</Demo>
-
-## 只读模式
-
-只读状态下不能上传，只能查看已上传的文件。
-
-<Demo :source-code="uploadReadonlyCode">
-  <template #source>
-    <upload-readonly />
-  </template>
-  <template #description>
-    设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="uploadApi" componentName="upload" />
-
-<script setup>
-import UploadBasic from '../examples/upload/basic.vue'
-import UploadMultiple from '../examples/upload/multiple.vue'
-import UploadDrag from '../examples/upload/drag.vue'
-import UploadImage from '../examples/upload/image.vue'
-import UploadLimit from '../examples/upload/limit.vue'
-import UploadAccept from '../examples/upload/accept.vue'
-import UploadReadonly from '../examples/upload/readonly.vue'
-import uploadApi from './meta/upload'
-
-import uploadBasicCode from '../examples/upload/basic.vue?raw'
-import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
-import uploadDragCode from '../examples/upload/drag.vue?raw'
-import uploadImageCode from '../examples/upload/image.vue?raw'
-import uploadLimitCode from '../examples/upload/limit.vue?raw'
-import uploadAcceptCode from '../examples/upload/accept.vue?raw'
-import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
-</script>
+# Upload 上传
+
+通过点击或者拖拽上传文件。
+
+## 基础用法
+
+最基本的上传组件。
+
+<Demo :source-code="uploadBasicCode">
+  <template #source>
+    <upload-basic />
+  </template>
+  <template #description>
+    使用 `v-model` 绑定文件ID值。设置 `is-not-api` 为 `true` 可在不调用后端API的情况下预览效果。
+  </template>
+</Demo>
+
+## 多文件上传
+
+支持一次性选择多个文件进行上传。
+
+<Demo :source-code="uploadMultipleCode">
+  <template #source>
+    <upload-multiple />
+  </template>
+  <template #description>
+    设置 `multiple` 属性启用多选模式。使用 `limit` 属性限制上传数量，设置为 `-1` 表示不限制。
+  </template>
+</Demo>
+
+## 拖拽上传
+
+支持拖拽文件到指定区域进行上传。
+
+<Demo :source-code="uploadDragCode">
+  <template #source>
+    <upload-drag />
+  </template>
+  <template #description>
+    设置 `drag` 属性为 `true` 即可启用拖拽上传功能。
+  </template>
+</Demo>
+
+## 图片上传
+
+专门用于上传图片的模式，提供图片预览功能。
+
+<Demo :source-code="uploadImageCode">
+  <template #source>
+    <upload-image />
+  </template>
+  <template #description>
+    设置 `is-upload-img` 属性为 `true` 启用图片上传模式，会以卡片形式展示上传的图片。
+  </template>
+</Demo>
+
+## 限制上传数量和大小
+
+可以限制上传文件的数量和大小。
+
+<Demo :source-code="uploadLimitCode">
+  <template #source>
+    <upload-limit />
+  </template>
+  <template #description>
+    使用 `limit` 属性限制上传数量，`max-size` 和 `size-type` 配合使用限制文件大小。设置 `is-tip` 显示提示信息。
+  </template>
+</Demo>
+
+## 文件类型限制
+
+限制上传的文件类型。
+
+<Demo :source-code="uploadAcceptCode">
+  <template #source>
+    <upload-accept />
+  </template>
+  <template #description>
+    使用 `accept` 属性指定接受的文件类型，例如 `.pdf`、`.xlsx,.xls`、`image/*` 等。
+  </template>
+</Demo>
+
+## 只读模式
+
+只读状态下不能上传，只能查看已上传的文件。
+
+<Demo :source-code="uploadReadonlyCode">
+  <template #source>
+    <upload-readonly />
+  </template>
+  <template #description>
+    设置 `readonly` 属性为 `true` 即可进入只读模式。可通过 `btn-text` 自定义按钮文字。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="uploadApi" componentName="upload" />
+
+<script setup>
+import UploadBasic from '../examples/upload/basic.vue'
+import UploadMultiple from '../examples/upload/multiple.vue'
+import UploadDrag from '../examples/upload/drag.vue'
+import UploadImage from '../examples/upload/image.vue'
+import UploadLimit from '../examples/upload/limit.vue'
+import UploadAccept from '../examples/upload/accept.vue'
+import UploadReadonly from '../examples/upload/readonly.vue'
+import uploadApi from './meta/upload'
+
+import uploadBasicCode from '../examples/upload/basic.vue?raw'
+import uploadMultipleCode from '../examples/upload/multiple.vue?raw'
+import uploadDragCode from '../examples/upload/drag.vue?raw'
+import uploadImageCode from '../examples/upload/image.vue?raw'
+import uploadLimitCode from '../examples/upload/limit.vue?raw'
+import uploadAcceptCode from '../examples/upload/accept.vue?raw'
+import uploadReadonlyCode from '../examples/upload/readonly.vue?raw'
+</script>

package/docs/components/vpanel.md

@@ -0,0 +1,25 @@
+# VPanel 垂直布局
+
+`VPanel` 是一个用于垂直方向内容布局的组件，可以方便地将内容分为顶部、主内容区域和底部。
+
+## 基础用法
+
+<Demo :source-code="vpanelBasicCode">
+  <template #source>
+    <vpanel-basic />
+  </template>
+  <template #description>
+    `VPanel` 通过 `top` 具名插槽和 `bottom` 具名插槽来放置顶部和底部内容，未具名插槽则为主内容区域。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="vpanelApi" componentName="vpanel" />
+
+
+<script setup>
+import VpanelBasic from '../examples/vpanel/basic.vue'
+import vpanelApi from './meta/vpanel'
+import vpanelBasicCode from '../examples/vpanel/basic.vue?raw'
+</script>

package/docs/components/workflow-viewer.md

@@ -1,21 +1,21 @@
-# WorkflowViewer 工作流查看器
-
-工作流查看器组件。
-
-## 基础用法
-
-<Demo :source-code="basicCode">
-  <template #source>
-    <Basic />
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="metaData" componentName="workflow-viewer" />
-
-<script setup>
-import Basic from '../examples/workflow-viewer/basic.vue'
-import basicCode from '../examples/workflow-viewer/basic.vue?raw'
-import metaData from './meta/workflow-viewer'
-</script>
+# WorkflowViewer 工作流查看器
+
+工作流查看器组件。
+
+## 基础用法
+
+<Demo :source-code="basicCode">
+  <template #source>
+    <Basic />
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="metaData" componentName="workflow-viewer" />
+
+<script setup>
+import Basic from '../examples/workflow-viewer/basic.vue'
+import basicCode from '../examples/workflow-viewer/basic.vue?raw'
+import metaData from './meta/workflow-viewer'
+</script>

package/docs/components/workflow.md

@@ -1,21 +1,21 @@
-# Workflow 工作流
-
-工作流编辑器组件，支持创建工作流图、编辑节点和连接线。
-
-## 基础用法
-
-<Demo :source-code="basicCode">
-  <template #source>
-    <Basic />
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="metaData" componentName="workflow" />
-
-<script setup>
-import Basic from '../examples/workflow/basic.vue'
-import basicCode from '../examples/workflow/basic.vue?raw'
-import metaData from './meta/workflow'
-</script>
+# Workflow 工作流
+
+工作流编辑器组件，支持创建工作流图、编辑节点和连接线。
+
+## 基础用法
+
+<Demo :source-code="basicCode">
+  <template #source>
+    <Basic />
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="metaData" componentName="workflow" />
+
+<script setup>
+import Basic from '../examples/workflow/basic.vue'
+import basicCode from '../examples/workflow/basic.vue?raw'
+import metaData from './meta/workflow'
+</script>

package/docs/examples/autocomplete/advanced.vue

@@ -1,35 +1,35 @@
-<template>
-  <j-autocomplete
-    v-model="state"
-    :options="restaurants"
-    placeholder="请输入内容"
-    :trigger-on-focus="false"
-    :debounce="500"
-    clearable
-    @select="handleSelect"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-interface RestaurantItem {
-  value: string
-  link: string
-}
-
-const state = ref('')
-
-const restaurants = ref<RestaurantItem[]>([
-  { value: 'vue', link: 'https://github.com/vuejs/vue' },
-  { value: 'element', link: 'https://github.com/ElemeFE/element' },
-  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-  { value: 'babel', link: 'https://github.com/babel/babel' },
-])
-const handleSelect = (item: RestaurantItem) => {
-  console.log(item)
-}
-</script>
+<template>
+  <j-autocomplete
+    v-model="state"
+    :options="restaurants"
+    placeholder="请输入内容"
+    :trigger-on-focus="false"
+    :debounce="500"
+    clearable
+    @select="handleSelect"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface RestaurantItem {
+  value: string
+  link: string
+}
+
+const state = ref('')
+
+const restaurants = ref<RestaurantItem[]>([
+  { value: 'vue', link: 'https://github.com/vuejs/vue' },
+  { value: 'element', link: 'https://github.com/ElemeFE/element' },
+  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+  { value: 'babel', link: 'https://github.com/babel/babel' },
+])
+const handleSelect = (item: RestaurantItem) => {
+  console.log(item)
+}
+</script>

package/docs/examples/autocomplete/basic.vue

@@ -1,32 +1,32 @@
-<template>
-  <j-autocomplete
-    v-model="state"
-    :options="restaurants"
-    placeholder="请输入内容"
-    @select="handleSelect"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-interface RestaurantItem {
-  value: string
-  link: string
-}
-
-const state = ref('')
-
-const restaurants = ref<RestaurantItem[]>([
-  { value: 'vue', link: 'https://github.com/vuejs/vue' },
-  { value: 'element', link: 'https://github.com/ElemeFE/element' },
-  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-  { value: 'babel', link: 'https://github.com/babel/babel' },
-])
-const handleSelect = (item: RestaurantItem) => {
-  console.log(item)
-}
-</script>
+<template>
+  <j-autocomplete
+    v-model="state"
+    :options="restaurants"
+    placeholder="请输入内容"
+    @select="handleSelect"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface RestaurantItem {
+  value: string
+  link: string
+}
+
+const state = ref('')
+
+const restaurants = ref<RestaurantItem[]>([
+  { value: 'vue', link: 'https://github.com/vuejs/vue' },
+  { value: 'element', link: 'https://github.com/ElemeFE/element' },
+  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+  { value: 'babel', link: 'https://github.com/babel/babel' },
+])
+const handleSelect = (item: RestaurantItem) => {
+  console.log(item)
+}
+</script>

package/docs/examples/autocomplete/clearable.vue

@@ -1,33 +1,33 @@
-<template>
-  <j-autocomplete
-    v-model="state"
-    :options="restaurants"
-    placeholder="请输入内容"
-    clearable
-    @select="handleSelect"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-interface RestaurantItem {
-  value: string
-  link: string
-}
-
-const state = ref('')
-
-const restaurants = ref<RestaurantItem[]>([
-  { value: 'vue', link: 'https://github.com/vuejs/vue' },
-  { value: 'element', link: 'https://github.com/ElemeFE/element' },
-  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-  { value: 'babel', link: 'https://github.com/babel/babel' },
-])
-const handleSelect = (item: RestaurantItem) => {
-  console.log(item)
-}
-</script>
+<template>
+  <j-autocomplete
+    v-model="state"
+    :options="restaurants"
+    placeholder="请输入内容"
+    clearable
+    @select="handleSelect"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface RestaurantItem {
+  value: string
+  link: string
+}
+
+const state = ref('')
+
+const restaurants = ref<RestaurantItem[]>([
+  { value: 'vue', link: 'https://github.com/vuejs/vue' },
+  { value: 'element', link: 'https://github.com/ElemeFE/element' },
+  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+  { value: 'babel', link: 'https://github.com/babel/babel' },
+])
+const handleSelect = (item: RestaurantItem) => {
+  console.log(item)
+}
+</script>

package/docs/examples/autocomplete/custom-template.vue

@@ -1,49 +1,49 @@
-<template>
-  <j-autocomplete
-    v-model="state"
-    :options="restaurants"
-    placeholder="请输入内容"
-    @select="handleSelect"
-  >
-    <template #default="{ item }">
-      <div class="value">{{ item.value }}</div>
-      <span class="link">{{ item.link }}</span>
-    </template>
-  </j-autocomplete>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-interface RestaurantItem {
-  value: string
-  link: string
-}
-
-const state = ref('')
-
-const restaurants = ref<RestaurantItem[]>([
-  { value: 'vue', link: 'https://github.com/vuejs/vue' },
-  { value: 'element', link: 'https://github.com/ElemeFE/element' },
-  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-  { value: 'babel', link: 'https://github.com/babel/babel' },
-])
-const handleSelect = (item: RestaurantItem) => {
-  console.log(item)
-}
-</script>
-
-<style scoped>
-.link {
-  font-size: 12px;
-  color: #b4b4b4;
-}
-
-.value {
-  line-height: 26px;
-  padding-right: 10px;
-}
-</style>
+<template>
+  <j-autocomplete
+    v-model="state"
+    :options="restaurants"
+    placeholder="请输入内容"
+    @select="handleSelect"
+  >
+    <template #default="{ item }">
+      <div class="value">{{ item.value }}</div>
+      <span class="link">{{ item.link }}</span>
+    </template>
+  </j-autocomplete>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface RestaurantItem {
+  value: string
+  link: string
+}
+
+const state = ref('')
+
+const restaurants = ref<RestaurantItem[]>([
+  { value: 'vue', link: 'https://github.com/vuejs/vue' },
+  { value: 'element', link: 'https://github.com/ElemeFE/element' },
+  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+  { value: 'babel', link: 'https://github.com/babel/babel' },
+])
+const handleSelect = (item: RestaurantItem) => {
+  console.log(item)
+}
+</script>
+
+<style scoped>
+.link {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.value {
+  line-height: 26px;
+  padding-right: 10px;
+}
+</style>