@a2simcode/ui 0.0.46 → 0.0.47

package/docs/components/upload.md

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

package/docs/components/workflow-viewer.md

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

package/docs/components/workflow.md

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

package/docs/examples/autocomplete/advanced.vue

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

package/docs/examples/autocomplete/basic.vue

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

package/docs/examples/autocomplete/clearable.vue

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

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

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

package/docs/examples/autocomplete/disabled.vue

@@ -0,0 +1,33 @@
+<template>
+  <j-autocomplete
+    v-model="state"
+    :options="restaurants"
+    placeholder="请输入内容"
+    readonly
+    @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/icon.vue

@@ -0,0 +1,37 @@
+<template>
+  <j-autocomplete
+    v-model="state"
+    :options="options"
+    placeholder="请输入内容"
+    @select="handleSelect"
+  >
+    <template #prefix>
+      <j-icon icon="mid:search" />
+    </template>
+  </j-autocomplete>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface RestaurantItem {
+  value: string
+  link: string
+}
+
+const state = ref('')
+
+const options = ref([
+  { 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>