From cd43b3803a4e6ea0da998b8779e39731a8f21d24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Tue, 21 Jun 2022 15:16:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8(component):=20progress=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E7=BB=84=E4=BB=B6=20=E6=96=B0=E5=A2=9E=E7=8E=AF?=
 =?UTF-8?q?=E5=BD=A2=E8=BF=9B=E5=BA=A6=E6=9D=A1=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#I5CB05

ISSUES CLOSED: #I5CB05
---
 .../src/component/progress/index.less         | 13 ++++
 .../src/component/progress/index.vue          | 73 ++++++++++++++++++-
 .../src/document/zh-CN/components/progress.md | 28 ++++++-
 3 files changed, 111 insertions(+), 3 deletions(-)

diff --git a/package/component/src/component/progress/index.less b/package/component/src/component/progress/index.less
index b01d334a..9f883799 100644
--- a/package/component/src/component/progress/index.less
+++ b/package/component/src/component/progress/index.less
@@ -37,4 +37,17 @@
   position: static;
   padding: 0 10px;
   color: #fff;
+}
+.lay-progress-circle {
+  position: relative;
+  display: inline-block;
+  width: 120px;
+  height: 120px;
+  text-align: center;
+}
+.lay-progress-circle__text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
\ No newline at end of file
diff --git a/package/component/src/component/progress/index.vue b/package/component/src/component/progress/index.vue
index 790d4a4c..43d24194 100644
--- a/package/component/src/component/progress/index.vue
+++ b/package/component/src/component/progress/index.vue
@@ -15,6 +15,7 @@ export interface LayProgressProps {
   size?: string;
   showText?: boolean;
   text?: string;
+  circle?: boolean;
 }
 
 const props = defineProps<LayProgressProps>();
@@ -27,10 +28,78 @@ const styles = computed(() => {
     },
   ];
 });
+
+const getStrokeDasharray = computed(() => {
+  let percent;
+  if (typeof props.percent == "string") {
+    percent = parseInt(props.percent);
+  } else {
+    percent = props.percent;
+  }
+  return `${percent * 31.4}` + "px 3140px";
+});
+
+const getCircleColor = computed(() => {
+  let color;
+  switch (props.theme) {
+    case "red":
+      color = "#ff5722";
+      break;
+    case "orange":
+      color = "#ffb800";
+      break;
+    case "green":
+      color = "#009688";
+      break;
+    case "cyan":
+      color = "#2f4056";
+      break;
+    case "blue":
+      color = "#1e9fff";
+      break;
+    case "black":
+      color = "#393d49";
+      break;
+    case "gray":
+      color = "#fafafa";
+      break;
+    default:
+      color = "var(--global-checked-color)";
+      break;
+  }
+  color = props.color ? props.color : color;
+  return color;
+});
 </script>
 
 <template>
-  <div class="layui-progress" :class="'layui-progress-' + size">
+  <template v-if="circle">
+    <div class="lay-progress-circle">
+      <svg viewBox="0 0 1060 1060">
+        <path
+          d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
+          style="
+            fill: none;
+            stroke-width: 50px;
+            stroke: var(--global-neutral-color-3);
+          "
+        ></path>
+        <path
+          d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
+          style="
+            stroke-width: 51px;
+            fill: none;
+            stroke-linecap: round;
+          "
+          :style="{ strokeDasharray: getStrokeDasharray,stroke:getCircleColor }"
+        ></path>
+      </svg>
+      <div class="lay-progress-circle__text" v-if="showText">
+        {{ text ? text : percent + "%" }}
+      </div>
+    </div>
+  </template>
+  <div class="layui-progress" :class="'layui-progress-' + size" v-else>
     <div
       class="layui-progress-bar"
       :class="'layui-bg-' + theme"
@@ -41,4 +110,4 @@ const styles = computed(() => {
       </span>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/package/document/src/document/zh-CN/components/progress.md b/package/document/src/document/zh-CN/components/progress.md
index e48683bd..4126ea57 100644
--- a/package/document/src/document/zh-CN/components/progress.md
+++ b/package/document/src/document/zh-CN/components/progress.md
@@ -119,6 +119,31 @@ export default {
 
 :::
 
+::: title 环形进度条
+:::
+::: demo
+
+<template>
+  <lay-progress percent="70" circle :show-text="showText" style="margin-right:10px"></lay-progress>
+  <lay-progress percent="60" circle :show-text="showText" text="销售量"></lay-progress>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const showText = ref(true)
+
+    return {
+      showText
+    }
+  }
+}
+</script>
+:::
+
 ::: title Progress 属性
 :::
 
@@ -131,7 +156,8 @@ export default {
 | size     | 尺寸     | `big`                                         |
 | text     | 提示     | --                                            |
 | color    | 颜色     | --                                            |
-| showText | 展示描述 | --                                            |
+| showText | 展示描述  | --                                            |
+|circle    | 环形进度条| 默认为 `false`                                 |
 
 :::
 

From 2862b3ff0ccfb0cbf6446f8621b859b813643456 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Tue, 21 Jun 2022 15:56:49 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8(component):=20cascader=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=96=B0,=E4=B8=8B=E6=8B=89=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=E4=BE=9D=E8=B5=96=E4=BA=8Edropdown=E7=BB=84=E4=BB=B6,?=
 =?UTF-8?q?=E5=BD=93=E6=95=B0=E6=8D=AE=E8=BF=87=E5=A4=9A=E6=97=B6=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=95=88=E6=9E=9C=E4=BE=9D=E8=B5=96=E4=BA=8ElayScroll?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: #I4RSDS
---
 .../src/component/cascader/index.less         | 14 +--
 .../src/component/cascader/index.vue          | 96 +++++++++----------
 .../src/document/zh-CN/components/cascader.md |  4 +-
 3 files changed, 50 insertions(+), 64 deletions(-)

diff --git a/package/component/src/component/cascader/index.less b/package/component/src/component/cascader/index.less
index 1f1e49bc..21661018 100644
--- a/package/component/src/component/cascader/index.less
+++ b/package/component/src/component/cascader/index.less
@@ -10,24 +10,16 @@
 }
 
 .layui-cascader .layui-cascader-panel {
-  position: absolute;
-  margin-top: 2px;
-  z-index: 899;
-  background-color: #fff;
   box-sizing: border-box;
-  border: 1px solid #e4e7ed;
   border-radius: 2px;
-  box-shadow: 0 2px 12px #0000001a;
   line-height: 26px;
   color: #000c;
   font-size: 14px;
   white-space: nowrap;
-  display: none;
+  display: inline-flex;
 }
 .layui-cascader-menu {
   border-right: 1px solid var(--global-neutral-color-3);
-  max-height: 360px;
-  overflow-y: scroll;
 }
 .layui-cascader-menu:last-child {
   border-right: none;
@@ -50,6 +42,6 @@
   background-color: var(--global-checked-color);
   color: white;
 }
-.layui-cascader-open .layui-cascader-panel {
-  display: flex !important;
+.layui-dropdown-up > dl {
+  min-width: unset;
 }
diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
index 9616acae..9676ad46 100644
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@@ -1,48 +1,45 @@
 <template>
-  <div
-    class="layui-cascader"
-    :class="[{ 'layui-cascader-open': open }]"
-    ref="cascaderRef"
-  >
-    <div @click="open = !open">
-      <lay-input
-        v-model="displayValue"
-        readonly
-        suffix-icon="layui-icon-down"
-        :placeholder="placeholder"
-        v-if="!slots.default"
-      ></lay-input>
-      <slot v-else></slot>
-    </div>
+  <lay-dropdown class="layui-cascader" ref="dropdownRef">
+    <lay-input
+      v-model="displayValue"
+      readonly
+      suffix-icon="layui-icon-down"
+      :placeholder="placeholder"
+      v-if="!slots.default"
+    ></lay-input>
+    <slot v-else></slot>
 
-    <dl class="layui-cascader-panel layui-anim layui-anim-upbit">
-      <template v-for="(itemCol, index) in treeData">
-        <ul
-          class="layui-cascader-menu"
-          :key="'cascader-menu' + index"
-          v-if="itemCol.data.length"
-        >
-          <li
-            class="layui-cascader-menu-item"
-            v-for="(item, i) in itemCol.data"
-            :key="index + i"
-            @click="selectBar(item, i, index)"
-            :class="[
-              {
-                'layui-cascader-selected': itemCol.selectIndex === i,
-              },
-            ]"
+    <template #content>
+      <div class="layui-cascader-panel">
+        <template v-for="(itemCol, index) in treeData">
+          <lay-scroll
+            height="180px"
+            class="layui-cascader-menu"
+            :key="'cascader-menu' + index"
+            v-if="itemCol.data.length"
           >
-            {{ item.label }}
-            <i
-              class="layui-icon layui-icon-right"
-              v-if="item.children && item.children.length"
-            ></i>
-          </li>
-        </ul>
-      </template>
-    </dl>
-  </div>
+            <div
+              class="layui-cascader-menu-item"
+              v-for="(item, i) in itemCol.data"
+              :key="index + i"
+              @click="selectBar(item, i, index)"
+              :class="[
+                {
+                  'layui-cascader-selected': itemCol.selectIndex === i,
+                },
+              ]"
+            >
+              {{ item.label }}
+              <i
+                class="layui-icon layui-icon-right"
+                v-if="item.children && item.children.length"
+              ></i>
+            </div>
+          </lay-scroll>
+        </template>
+      </div>
+    </template>
+  </lay-dropdown>
 </template>
 
 <script lang="ts">
@@ -54,18 +51,17 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { ref, onMounted, watch, useSlots } from "vue";
-import { onClickOutside } from "@vueuse/core";
 export interface LayCascaderProps {
   options?: Array<any> | null;
   modelValue?: string;
   decollator?: string;
-  placeholder?:string;
+  placeholder?: string;
 }
 const props = withDefaults(defineProps<LayCascaderProps>(), {
   options: null,
   modelValue: "",
   decollator: "/",
-  placeholder:''
+  placeholder: "",
 });
 const emit = defineEmits(["update:modelValue", "change", "clear"]);
 
@@ -199,15 +195,13 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
       .join(props.decollator);
     emit("update:modelValue", value);
     emit("change", displayValue.value);
-    open.value = false;
+    if (dropdownRef.value)
+      // @ts-ignore
+      dropdownRef.value.hide();
   }
 };
 
-const open = ref<boolean>(false);
 const displayValue = ref<string | number | null>(null);
 const slots = useSlots();
-const cascaderRef = ref<null | HTMLElement>();
-onClickOutside(cascaderRef, () => {
-  open.value = false;
-});
+const dropdownRef = ref(null);
 </script>
diff --git a/package/document/src/document/zh-CN/components/cascader.md b/package/document/src/document/zh-CN/components/cascader.md
index 8f08dfc9..c1a0e364 100644
--- a/package/document/src/document/zh-CN/components/cascader.md
+++ b/package/document/src/document/zh-CN/components/cascader.md
@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-cascader` 标签创建级联选择器
 
 <template>
-  <lay-cascader :options="options" v-model="value" placeholder="点我试一试"></lay-cascader>
+  <lay-cascader :options="options" v-model="value" placeholder="点我试一试" style="width:250px"></lay-cascader>
   <br>
   <span>输出的值：{{value}}</span>
 </template>
@@ -297,7 +297,7 @@ const options = [
 :::
 ::: demo 使用 `decollator` 属性 自定义分割符号
 <template>
-  <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号"></lay-cascader>
+  <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
   <br>
   <span>输出的值：{{value1}}</span>
 </template>