@uzum-tech/ui 1.13.0 → 1.13.1

package/dist/index.js

@@ -49655,7 +49655,8 @@
         fontBodyMedium,
         lineHeightBodyMedium,
         iconSmall,
-        containerPrimary
+        containerPrimary,
+        elementsTertiary
       } = vars;
       return {
         titleFontSize: fontBodyLarge,
@@ -49674,7 +49675,10 @@
         backgroundColor: containerPrimary,
         borderRadius: "20px",
         padding: "24px",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        iconBorder: "none",
+        iconBorderRadius: "100px",
+        iconBackground: elementsTertiary
       };
     };
     const collapseLight = {
@@ -61740,6 +61744,45 @@
       }
     });
 
+    const collapseProps = {
+      ...useTheme.props,
+      defaultExpandedNames: {
+        type: [Array, String],
+        default: null
+      },
+      expandedNames: [Array, String],
+      arrowPlacement: {
+        type: String,
+        default: "right-edge"
+      },
+      accordion: {
+        type: Boolean,
+        default: false
+      },
+      displayDirective: {
+        type: String,
+        default: "if"
+      },
+      triggerAreas: {
+        type: Array,
+        default: () => ["main", "extra", "arrow"]
+      },
+      onItemHeaderClick: [Function, Array],
+      "onUpdate:expandedNames": [Function, Array],
+      onUpdateExpandedNames: [Function, Array],
+      // deprecated
+      onExpandedNamesChange: {
+        type: [Function, Array],
+        validator: () => {
+          {
+            warn$2("collapse", "`on-expanded-names-change` is deprecated, please use `on-update:expanded-names` instead.");
+          }
+          return true;
+        },
+        default: void 0
+      }
+    };
+
     var style$V = cB("collapse", `
     width: 100%;
     background-color: var(--u-background-color);
@@ -61768,8 +61811,9 @@
             height: 28px;
             justify-content: center;
             align-items: center;
-            border-radius: 100px;
-            background: #F3F4F6;
+            border: var(--u-icon-border);
+            border-radius: var(--u-icon-border-radius);
+            background: var(--u-icon-background);
           `, [cB("base-icon", `
               transform: scaleY(1) rotate(90deg);
               transition:
@@ -61807,43 +61851,6 @@
           color: var(--u-arrow-color);
         `)])])]);
 
-    const collapseProps = {
-      ...useTheme.props,
-      defaultExpandedNames: {
-        type: [Array, String],
-        default: null
-      },
-      expandedNames: [Array, String],
-      arrowPlacement: {
-        type: String,
-        default: "right-edge"
-      },
-      accordion: {
-        type: Boolean,
-        default: false
-      },
-      displayDirective: {
-        type: String,
-        default: "if"
-      },
-      onItemHeaderClick: [Function, Array],
-      "onUpdate:expandedNames": [Function, Array],
-      onUpdateExpandedNames: [Function, Array],
-      // deprecated
-      onExpandedNamesChange: {
-        type: [Function, Array],
-        validator: () => {
-          {
-            warn$2(
-              "collapse",
-              "`on-expanded-names-change` is deprecated, please use `on-update:expanded-names` instead."
-            );
-          }
-          return true;
-        },
-        default: void 0
-      }
-    };
     const collapseInjectionKey = createInjectionKey("u-collapse");
     var UCollapse = vue.defineComponent({
       name: "Collapse",
@@ -61947,7 +61954,10 @@
               backgroundColor,
               borderRadius,
               padding,
-              boxSizing
+              boxSizing,
+              iconBorder,
+              iconBorderRadius,
+              iconBackground
             }
           } = themeRef.value;
           return {
@@ -61968,7 +61978,10 @@
             "--u-background-color": backgroundColor,
             "--u-border-radius": borderRadius,
             "--u-padding": padding,
-            "--u-box-sizing": boxSizing
+            "--u-box-sizing": boxSizing,
+            "--u-icon-border": iconBorder,
+            "--u-icon-border-radius": iconBorderRadius,
+            "--u-icon-background": iconBackground
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass("collapse", void 0, cssVarsRef, props) : void 0;
@@ -61998,6 +62011,13 @@
       }
     });
 
+    const collapseItemProps = {
+      title: String,
+      name: [String, Number],
+      disabled: Boolean,
+      displayDirective: String
+    };
+
     var UCollapseItemContent = vue.defineComponent({
       name: "CollapseItemContent",
       props: {
@@ -62029,12 +62049,6 @@
       }
     });
 
-    const collapseItemProps = {
-      title: String,
-      name: [String, Number],
-      disabled: Boolean,
-      displayDirective: String
-    };
     var UCollapseItem = vue.defineComponent({
       name: "CollapseItem",
       props: collapseItemProps,
@@ -62071,12 +62085,26 @@
           return true;
         });
         const rtlEnabledRef = useRtl("Collapse", mergedRtlRef, mergedClsPrefixRef);
+        function clickedOn(event, area) {
+          return happensIn(event, area);
+        }
+        function checkClickedPlace(event) {
+          let clickedPlace = "main";
+          if (clickedOn(event, "arrow")) {
+            clickedPlace = "arrow";
+          }
+          if (clickedOn(event, "extra")) {
+            clickedPlace = "extra";
+          }
+          return clickedPlace;
+        }
         return {
           rtlEnabled: rtlEnabledRef,
           collapseSlots,
           randomName,
           mergedClsPrefix: mergedClsPrefixRef,
           collapsed: collapsedRef,
+          triggerAreas: vue.toRef(collapseProps, "triggerAreas"),
           mergedDisplayDirective: vue.computed(() => {
             const { displayDirective } = props;
             if (displayDirective) {
@@ -62088,10 +62116,13 @@
           arrowPlacement: vue.computed(() => {
             return collapseProps.arrowPlacement;
           }),
-          handleClick(e) {
-            e.stopPropagation();
+          handleClick(event) {
+            const clickedPlace = checkClickedPlace(event);
+            if (!collapseProps.triggerAreas.includes(clickedPlace)) {
+              return;
+            }
             if (UCollapse && !props.disabled) {
-              UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, e);
+              UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, event);
             }
           }
         };
@@ -62104,7 +62135,8 @@
           collapsed,
           mergedDisplayDirective,
           mergedClsPrefix,
-          disabled
+          disabled,
+          triggerAreas
         } = this;
         const headerNode = resolveSlotWithProps(
           $slots.header,
@@ -62117,11 +62149,12 @@
           "div",
           {
             class: `${mergedClsPrefix}-collapse-item-arrow`,
-            key: this.rtlEnabled ? 0 : 1
+            key: this.rtlEnabled ? 0 : 1,
+            "data-arrow": true
           },
           resolveSlotWithProps(arrowSlot, { collapsed }, () => [
             /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
-              default: collapseSlots.expandIcon ?? (() => this.rtlEnabled ? /* @__PURE__ */ vue.h(ChevronLeftIcon, null) : /* @__PURE__ */ vue.h(ChevronRightIcon, null))
+              default: () => this.rtlEnabled ? /* @__PURE__ */ vue.h(ChevronLeftIcon, null) : /* @__PURE__ */ vue.h(ChevronRightIcon, null)
             })
           ])
         );
@@ -62132,9 +62165,11 @@
               `${mergedClsPrefix}-collapse-item`,
               `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
               disabled && `${mergedClsPrefix}-collapse-item--disabled`,
-              !collapsed && `${mergedClsPrefix}-collapse-item--active`
-            ],
-            onClick: this.handleClick
+              !collapsed && `${mergedClsPrefix}-collapse-item--active`,
+              triggerAreas.map((area) => {
+                return `${mergedClsPrefix}-collapse-item--trigger-area-${area}`;
+              })
+            ]
           },
           /* @__PURE__ */ vue.h(
             "div",
@@ -62142,16 +62177,10 @@
               class: [
                 `${mergedClsPrefix}-collapse-item__header`,
                 !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
-              ]
+              ],
+              onClick: this.handleClick
             },
-            /* @__PURE__ */ vue.h(
-              "div",
-              {
-                class: `${mergedClsPrefix}-collapse-item__header-main`
-              },
-              arrowPlacement !== "right-edge" && arrowNode,
-              headerNode
-            ),
+            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-collapse-item__header-main` }, arrowPlacement !== "right-edge" && arrowNode, headerNode),
             resolveWrappedSlotWithProps(
               headerExtraSlot,
               { collapsed },
@@ -62159,7 +62188,7 @@
                 "div",
                 {
                   class: `${mergedClsPrefix}-collapse-item__header-extra`,
-                  onClick: this.handleClick
+                  "data-extra": true
                 },
                 children
               )
@@ -131050,7 +131079,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.13.0";
+    var version = "1.13.1";
 
     function useExposeProxy(targetRef) {
       return new Proxy({}, {