@gx-design-vue/pro-utils 0.0.24 → 0.0.26

package/dist/components/FieldLabel/index.d.ts

@@ -0,0 +1,77 @@
+import type { CSSProperties, PropType } from 'vue';
+import type { SizeType, VueNode } from '../../typings';
+import './index.less';
+export declare type FieldLabelProps = {
+    label?: VueNode;
+    value?: any;
+    disabled?: boolean;
+    onClear?: () => void;
+    size?: SizeType;
+    ellipsis?: boolean;
+    placeholder?: VueNode;
+    expanded?: boolean;
+    id?: string;
+    class?: string;
+    formatter?: (value: any) => string;
+    style?: CSSProperties;
+    bordered?: boolean;
+    allowClear?: boolean;
+    /**
+     * 点击标签的事件，用来唤醒 down menu 状态
+     */
+    onLabelClick?: () => void;
+};
+declare const FieldLabel: import("vue").DefineComponent<{
+    id: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    style: import("vue-types").VueTypeValidableDef<CSSProperties>;
+    size: {
+        type: PropType<SizeType>;
+        default: string;
+    };
+    label: PropType<VueNode>;
+    placeholder: PropType<VueNode>;
+    class: PropType<string>;
+    ellipsis: PropType<boolean>;
+    allowClear: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    bordered: PropType<boolean>;
+    expanded: PropType<boolean>;
+    disabled: PropType<boolean>;
+    onClear: PropType<() => void>;
+    onLabelClick: PropType<() => void>;
+    formatter: PropType<(value: any) => string>;
+    value: import("vue-types").VueTypeValidableDef<any>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    style: import("vue-types").VueTypeValidableDef<CSSProperties>;
+    size: {
+        type: PropType<SizeType>;
+        default: string;
+    };
+    label: PropType<VueNode>;
+    placeholder: PropType<VueNode>;
+    class: PropType<string>;
+    ellipsis: PropType<boolean>;
+    allowClear: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    bordered: PropType<boolean>;
+    expanded: PropType<boolean>;
+    disabled: PropType<boolean>;
+    onClear: PropType<() => void>;
+    onLabelClick: PropType<() => void>;
+    formatter: PropType<(value: any) => string>;
+    value: import("vue-types").VueTypeValidableDef<any>;
+}>>, {
+    id: string;
+    size: SizeType;
+    allowClear: boolean;
+}>;
+export default FieldLabel;

package/dist/components/FieldLabel/index.less

@@ -0,0 +1,107 @@
+@import '../../design/config.less';
+@import '../../design/ant-design-theme.less';
+
+@pro-core-field-label: ~'@{gx-prefix}-pro-core-field-label';
+
+.@{pro-core-field-label} {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 30px;
+  padding-block: 0;
+  padding-inline: 8px;
+  font-size: 14px;
+  line-height: 30px;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: fade(@black, 6%);
+  }
+
+  &-active {
+    padding: 0 12px;
+    background-color: fade(@black, 6%);
+
+    &.@{pro-core-field-label}-allow-clear:hover:not(.@{pro-core-field-label}-disabled) {
+      .@{pro-core-field-label}-arrow {
+        display: none;
+      }
+
+      .@{pro-core-field-label}-close {
+        display: inline-flex;
+      }
+    }
+  }
+
+  .@{pro-core-field-label}-icon {
+    height: 12px;
+    padding-block: 1px;
+    padding-inline: 1px;
+    color:  fade(@black, 45%);
+    font-size: 12px;
+    vertical-align: middle;
+
+    &.@{pro-core-field-label}-close {
+      display: none;
+      height: 14px;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      color: #ffffff;
+      font-size: 8px;
+      background-color:  fade(@black, 25%);
+      border-radius: 50%;
+
+      &:hover {
+        color:  fade(@black, 45%);
+      }
+    }
+  }
+
+  &-disabled {
+    color:  fade(@black, 25%);
+    cursor: not-allowed;
+
+    .@{pro-core-field-label}-icon {
+      color:  fade(@black, 25%);
+    }
+  }
+
+  &-small {
+    height: 24px;
+    padding: 0 4px;
+    font-size: @font-size-sm;
+    line-height: 24px;
+
+    &.@{pro-core-field-label}-active {
+      padding: 0 8px;
+    }
+
+    .@{pro-core-field-label}-icon {
+      padding: 0;
+    }
+
+    .@{pro-core-field-label}-close {
+      padding: 3px;
+      margin-top: -2px;
+      font-size: 6px;
+    }
+  }
+
+  &-bordered {
+    height: 32px;
+    padding: 0 12px;
+    border: @border-width-base solid #d9d9d9;
+    border-radius: @border-radius-base;
+  }
+
+  &-bordered&-small {
+    height: 24px;
+    padding: 0 8px;
+  }
+
+  &-bordered&-active {
+    background-color: @white;
+  }
+}

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import { isScroll, getScrollContainer, isInContainer } from './scroll';
 import scrollTo from './scroll/scrollTo';
 import getScroll from './scroll/getScroll';
 import throttleByAnimationFrame from './scroll/throttleByAnimationFrame';
+import FieldLabel, { type FieldLabelProps } from './components/FieldLabel';
 import LabelIconTip, { type LabelTooltipType } from './components/LabelIconTip';
 export * from './isBrowser';
 export * from './omitBoolean';
@@ -17,5 +18,5 @@ export * from './slots';
 export * from './utils';
 export * from './utils/validate';
 export * from './typings';
-export type { LabelTooltipType };
-export { isServer, LabelIconTip, isScroll, isInContainer, getScrollContainer, scrollTo, getScroll, throttleByAnimationFrame };
+export type { LabelTooltipType, FieldLabelProps };
+export { isServer, FieldLabel, LabelIconTip, isScroll, isInContainer, getScrollContainer, scrollTo, getScroll, throttleByAnimationFrame };