@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/es/collapse/style/index.less

@@ -1,180 +1,180 @@
-@import '../../style/mixins/index.less';
-@import './token.less';
-
-@collapse-prefix-cls: ~'@{prefix}-collapse';
-
-.icon-hover(
-  ~'@{collapse-prefix-cls}-item',
-  @collapse-expand-icon-size,
-  @collapse-expand-icon-size-bg
-);
-
-.icon-hover-bg(~'@{collapse-prefix-cls}-item', @collapse-expand-icon-color-bg);
-
-.@{collapse-prefix-cls} {
-  overflow: hidden;
-  line-height: @collapse-line-height;
-  border: @collapse-border-width solid @collapse-color-border;
-  border-radius: @collapse-border-radius;
-
-  &-item {
-    box-sizing: border-box;
-    border-bottom: @collapse-title-border-width solid
-      @collapse-item-color-border;
-
-    &-active {
-      > .@{collapse-prefix-cls}-item-header {
-        background-color: @collapse-title-color-bg_active;
-        border-color: @collapse-title-color-border;
-        transition: border-color 0s ease 0s;
-
-        .@{collapse-prefix-cls}-item-header-title {
-          font-weight: @collapse-title-font-weight_active;
-        }
-
-        .@{collapse-prefix-cls}-item-expand-icon {
-          transform: rotate(90deg);
-        }
-
-        .@{collapse-prefix-cls}-item-icon-right
-          .@{collapse-prefix-cls}-item-expand-icon {
-          transform: rotate(-90deg);
-        }
-      }
-    }
-
-    &-header {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding-top: @collapse-title-padding-vertical;
-      padding-bottom: $padding-top;
-      overflow: hidden;
-      color: @collapse-title-color-text;
-      font-size: @collapse-title-font-size;
-      line-height: @collapse-title-line-height;
-      background-color: @collapse-title-color-bg;
-      border-bottom: 1px solid @color-transparent;
-      cursor: pointer;
-      // Ensure that the border is hidden when the collapse animation is complete
-      transition: border-color 0s ease 0.19s;
-
-      &-left {
-        padding-right: @collapse-title-padding-horizontal;
-        padding-left: @collapse-title-padding-horizontal +
-          @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;
-      }
-
-      &-right {
-        padding-right: @collapse-title-padding-horizontal +
-          @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;
-        padding-left: @collapse-title-padding-horizontal;
-
-        + .@{collapse-prefix-cls}-item-content {
-          padding-left: @collapse-title-padding-horizontal;
-        }
-      }
-
-      &-disabled {
-        color: @collapse-title-color-text_disabled;
-        background-color: @collapse-title-color-bg_disabled;
-        cursor: not-allowed;
-
-        .@{collapse-prefix-cls}-item-header-icon {
-          color: @collapse-title-color-text_disabled;
-        }
-      }
-
-      &-title {
-        display: inline;
-      }
-
-      &-extra {
-        float: right;
-      }
-    }
-
-    // expand icon style
-    & &-icon-hover {
-      position: absolute;
-      top: 50%;
-      left: @collapse-title-padding-horizontal;
-      text-align: center;
-      transform: translateY(-50%);
-    }
-
-    & &-icon-right {
-      right: @collapse-title-padding-horizontal;
-      left: unset;
-
-      > .@{collapse-prefix-cls}-item-header-icon-down {
-        transform: rotate(-90deg);
-      }
-    }
-
-    & &-expand-icon {
-      position: relative;
-      display: block;
-      color: @collapse-color-expand-icon;
-      font-size: @collapse-expand-icon-size;
-      vertical-align: middle;
-      transition: transform @transition-duration-2
-        @transition-timing-function-standard;
-    }
-
-    &-content {
-      position: relative;
-      padding-right: @collapse-title-padding-horizontal;
-      padding-left: @collapse-title-padding-horizontal +
-        @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;
-      overflow: hidden;
-      color: @collapse-content-color-text;
-      font-size: @collapse-content-font-size;
-      background-color: @collapse-content-color-bg;
-
-      &-expanded {
-        display: block;
-        height: auto;
-      }
-
-      &-box {
-        padding: @collapse-content-padding-vertical 0;
-      }
-    }
-
-    &&-disabled > &-content {
-      color: @collapse-content-color-text_disabled;
-    }
-
-    &-no-icon > &-header {
-      padding-right: @collapse-title-padding-horizontal;
-      padding-left: @collapse-title-padding-horizontal;
-    }
-
-    &:last-of-type {
-      border-bottom: none;
-    }
-  }
-
-  &.@{collapse-prefix-cls}-borderless {
-    border: none;
-  }
-
-  &::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-}
-
-.collapse-slider-enter-from,
-.collapse-slider-leave-to {
-  height: 0;
-}
-
-.collapse-slider-enter-active,
-.collapse-slider-leave-active {
-  transition: height @transition-duration-2 @transition-timing-function-standard;
-}
+@import '../../style/mixins/index.less';
+@import './token.less';
+
+@collapse-prefix-cls: ~'@{prefix}-collapse';
+
+.icon-hover(
+  ~'@{collapse-prefix-cls}-item',
+  @collapse-expand-icon-size,
+  @collapse-expand-icon-size-bg
+);
+
+.icon-hover-bg(~'@{collapse-prefix-cls}-item', @collapse-expand-icon-color-bg);
+
+.@{collapse-prefix-cls} {
+  overflow: hidden;
+  line-height: @collapse-line-height;
+  border: @collapse-border-width solid @collapse-color-border;
+  border-radius: @collapse-border-radius;
+
+  &-item {
+    box-sizing: border-box;
+    border-bottom: @collapse-title-border-width solid
+      @collapse-item-color-border;
+
+    &-active {
+      > .@{collapse-prefix-cls}-item-header {
+        background-color: @collapse-title-color-bg_active;
+        border-color: @collapse-title-color-border;
+        transition: border-color 0s ease 0s;
+
+        .@{collapse-prefix-cls}-item-header-title {
+          font-weight: @collapse-title-font-weight_active;
+        }
+
+        .@{collapse-prefix-cls}-item-expand-icon {
+          transform: rotate(90deg);
+        }
+
+        .@{collapse-prefix-cls}-item-icon-right
+          .@{collapse-prefix-cls}-item-expand-icon {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &-header {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding-top: @collapse-title-padding-vertical;
+      padding-bottom: $padding-top;
+      overflow: hidden;
+      color: @collapse-title-color-text;
+      font-size: @collapse-title-font-size;
+      line-height: @collapse-title-line-height;
+      background-color: @collapse-title-color-bg;
+      border-bottom: 1px solid @color-transparent;
+      cursor: pointer;
+      // Ensure that the border is hidden when the collapse animation is complete
+      transition: border-color 0s ease 0.19s;
+
+      &-left {
+        padding-right: @collapse-title-padding-horizontal;
+        padding-left: @collapse-title-padding-horizontal +
+          @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;
+      }
+
+      &-right {
+        padding-right: @collapse-title-padding-horizontal +
+          @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;
+        padding-left: @collapse-title-padding-horizontal;
+
+        + .@{collapse-prefix-cls}-item-content {
+          padding-left: @collapse-title-padding-horizontal;
+        }
+      }
+
+      &-disabled {
+        color: @collapse-title-color-text_disabled;
+        background-color: @collapse-title-color-bg_disabled;
+        cursor: not-allowed;
+
+        .@{collapse-prefix-cls}-item-header-icon {
+          color: @collapse-title-color-text_disabled;
+        }
+      }
+
+      &-title {
+        display: inline;
+      }
+
+      &-extra {
+        float: right;
+      }
+    }
+
+    // expand icon style
+    & &-icon-hover {
+      position: absolute;
+      top: 50%;
+      left: @collapse-title-padding-horizontal;
+      text-align: center;
+      transform: translateY(-50%);
+    }
+
+    & &-icon-right {
+      right: @collapse-title-padding-horizontal;
+      left: unset;
+
+      > .@{collapse-prefix-cls}-item-header-icon-down {
+        transform: rotate(-90deg);
+      }
+    }
+
+    & &-expand-icon {
+      position: relative;
+      display: block;
+      color: @collapse-color-expand-icon;
+      font-size: @collapse-expand-icon-size;
+      vertical-align: middle;
+      transition: transform @transition-duration-2
+        @transition-timing-function-standard;
+    }
+
+    &-content {
+      position: relative;
+      padding-right: @collapse-title-padding-horizontal;
+      padding-left: @collapse-title-padding-horizontal +
+        @collapse-expand-icon-size-bg + @collapse-expand-icon-spacing-text;
+      overflow: hidden;
+      color: @collapse-content-color-text;
+      font-size: @collapse-content-font-size;
+      background-color: @collapse-content-color-bg;
+
+      &-expanded {
+        display: block;
+        height: auto;
+      }
+
+      &-box {
+        padding: @collapse-content-padding-vertical 0;
+      }
+    }
+
+    &&-disabled > &-content {
+      color: @collapse-content-color-text_disabled;
+    }
+
+    &-no-icon > &-header {
+      padding-right: @collapse-title-padding-horizontal;
+      padding-left: @collapse-title-padding-horizontal;
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+
+  &.@{collapse-prefix-cls}-borderless {
+    border: none;
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}
+
+.collapse-slider-enter-from,
+.collapse-slider-leave-to {
+  height: 0;
+}
+
+.collapse-slider-enter-active,
+.collapse-slider-leave-active {
+  transition: height @transition-duration-2 @transition-timing-function-standard;
+}

package/es/collapse/style/token.less

@@ -1,34 +1,34 @@
-@import '../../style/theme/index.less';
-
-@collapse-border-width: @border-1;
-@collapse-border-radius: @radius-medium;
-@collapse-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@collapse-line-height: 1.5715;
-
-@collapse-title-line-height: 24px;
-@collapse-title-border-width: @border-1;
-@collapse-title-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@collapse-title-font-size: @font-size-body-3;
-@collapse-title-padding-horizontal: 13px;
-@collapse-title-padding-vertical: @spacing-4;
-@collapse-title-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@collapse-title-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@collapse-title-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@collapse-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
-@collapse-title-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@collapse-title-font-weight_active: @font-weight-500;
-
-@collapse-content-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
-@collapse-content-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@collapse-content-font-size: @font-size-body-3;
-@collapse-content-padding-vertical: @spacing-4;
-@collapse-content-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');
-
-@collapse-expand-icon-size: 14px;
-@collapse-expand-icon-size-bg: @size-4;
-@collapse-expand-icon-spacing-text: 5px;
-@collapse-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-7');
-
-@collapse-item-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
-@collapse-item-border-width: @border-1;
-@collapse-expand-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@import '../../style/theme/index.less';
+
+@collapse-border-width: @border-1;
+@collapse-border-radius: @radius-medium;
+@collapse-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@collapse-line-height: 1.5715;
+
+@collapse-title-line-height: 24px;
+@collapse-title-border-width: @border-1;
+@collapse-title-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@collapse-title-font-size: @font-size-body-3;
+@collapse-title-padding-horizontal: 13px;
+@collapse-title-padding-vertical: @spacing-4;
+@collapse-title-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@collapse-title-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@collapse-title-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@collapse-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@collapse-title-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@collapse-title-font-weight_active: @font-weight-500;
+
+@collapse-content-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@collapse-content-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@collapse-content-font-size: @font-size-body-3;
+@collapse-content-padding-vertical: @spacing-4;
+@collapse-content-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');
+
+@collapse-expand-icon-size: 14px;
+@collapse-expand-icon-size-bg: @size-4;
+@collapse-expand-icon-spacing-text: 5px;
+@collapse-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-7');
+
+@collapse-item-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
+@collapse-item-border-width: @border-1;
+@collapse-expand-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');

package/es/color-picker/color-picker.d.ts

@@ -95,8 +95,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string[];
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onPopup-visible-change"?: ((visible: boolean, value: string) => any) | undefined;
 }>, {
     disabled: boolean;

package/es/color-picker/index.d.ts

@@ -48,8 +48,8 @@ declare const ColorPicker: {
             default: () => string[];
         };
     }>> & Readonly<{
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         "onPopup-visible-change"?: ((visible: boolean, value: string) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:modelValue': (value: string) => true;
@@ -117,8 +117,8 @@ declare const ColorPicker: {
             default: () => string[];
         };
     }>> & Readonly<{
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         "onPopup-visible-change"?: ((visible: boolean, value: string) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         disabled: boolean;
@@ -179,8 +179,8 @@ declare const ColorPicker: {
         default: () => string[];
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onPopup-visible-change"?: ((visible: boolean, value: string) => any) | undefined;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (value: string) => true;