@uzum-tech/ui 0.1.2 → 1.0.1

package/lib/_internal/selection/src/Selection.js

@@ -14,6 +14,8 @@ const suffix_1 = __importDefault(require("../../suffix"));
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const _internal_1 = require("../../../_internal");
+const seemly_1 = require("seemly");
+const clear_1 = __importDefault(require("../../clear"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'InternalSelection',
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { clsPrefix: {
@@ -40,7 +42,7 @@ exports.default = (0, vue_1.defineComponent)({
         }, loading: Boolean, loadingSkeleton: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function }),
+        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function, round: Boolean, counter: Boolean, secondary: Boolean }),
     setup(props) {
         const patternInputMirrorRef = (0, vue_1.ref)(null);
         const patternInputRef = (0, vue_1.ref)(null);
@@ -85,6 +87,22 @@ exports.default = (0, vue_1.defineComponent)({
                 return props.selectedOption !== null;
             }
         });
+        const showSuffixClearRef = (0, vue_1.computed)(() => {
+            return (mergedClearableRef.value &&
+                selectedRef.value &&
+                !filterCounterVisibleRef.value);
+        });
+        const filterCounterLengthRef = (0, vue_1.computed)(() => {
+            var _a;
+            const length = ((_a = props.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            return length > 99 ? '99+' : length;
+        });
+        const filterCounterClearableRef = (0, vue_1.computed)(() => {
+            return props.clearable && !props.disabled && filterCounterVisibleRef.value;
+        });
+        const filterCounterVisibleRef = (0, vue_1.computed)(() => {
+            return props.counter && props.multiple && selectedRef.value;
+        });
         function syncMirrorWidth() {
             var _a;
             const { value: patternInputMirrorEl } = patternInputMirrorRef;
@@ -156,6 +174,8 @@ exports.default = (0, vue_1.defineComponent)({
             doBlur(e);
         }
         function handleClear(e) {
+            if (!mergedClearableRef.value)
+                return;
             doClear(e);
         }
         function handleMouseEnter() {
@@ -327,17 +347,22 @@ exports.default = (0, vue_1.defineComponent)({
         });
         (0, _utils_1.useOnResize)(selfRef, props.onResize);
         const { inlineThemeDisabled } = props;
-        const cssVarsRef = (0, vue_1.computed)(() => {
+        const tagSizeRef = (0, vue_1.computed)(() => {
             const { size } = props;
-            const { common: { cubicBezierEaseInOut, fontWeight, fontWeightStrong }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, borderDisabled, arrowColor, arrowColorDisabled, arrowColorHover, loadingColor, 
+            return size === 'huge' ? 'medium' : 'small';
+        });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size, round } = props;
+            const { common: { cubicBezierEaseInOut, fontWeight }, self: { color, placeholderColor, textColor, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, borderDisabled, arrowColor, arrowColorDisabled, arrowColorHover, loadingColor, 
             // form warning
             colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
             // form error
             colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
             // clear
-            clearColor, clearColorHover, clearColorPressed, clearSize, 
-            // arrow
-            arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
+            clearColor, clearColorHover, clearColorPressed, 
+            // secondary
+            arrowColorSecondary, clearColorSecondary, colorSecondary, textColorSecondary, borderSecondary, arrowColorDisabledSecondary, clearColorDisabledSecondary, colorDisabledSecondary, textColorDisabledSecondary, borderDisabledSecondary, arrowColorHoverSecondary, clearColorHoverSecondary, colorHoverSecondary, textColorHoverSecondary, borderHoverSecondary, filterCounterTextColor, filterCounterSeparatorColor, filterCounterTextColorDisabled, filterCounterSeparatorColorDisabled, caretColorSecondary, arrowColorActiveSecondary, clearColorActiveSecondary, colorActiveSecondary, textColorActiveSecondary, borderActiveSecondary, arrowColorFocusSecondary, clearColorFocusSecondary, colorFocusSecondary, textColorFocusSecondary, borderFocusSecondary, [(0, _utils_1.createKey)('clearSize', size)]: clearSize, [(0, _utils_1.createKey)('arrowSize', size)]: arrowSize, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('borderRadius', size)]: borderRadius, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('lineHeight', size)]: lineHeight } } = themeRef.value;
+            const { top: paddingTop, right: paddingRight, bottom: paddingBottom, left: paddingLeft } = (0, seemly_1.getPadding)(padding);
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border': border,
@@ -345,7 +370,7 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-border-focus': borderFocus,
                 '--u-border-hover': borderHover,
                 '--u-border-disabled': borderDisabled,
-                '--u-border-radius': borderRadius,
+                '--u-border-radius': round ? '100px' : borderRadius,
                 '--u-box-shadow-active': boxShadowActive,
                 '--u-box-shadow-focus': boxShadowFocus,
                 '--u-box-shadow-hover': boxShadowHover,
@@ -353,12 +378,18 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-color': color,
                 '--u-color-active': colorActive,
                 '--u-color-disabled': colorDisabled,
+                '--u-line-height': lineHeight,
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,
-                '--u-font-weight-strong': fontWeightStrong,
                 '--u-height': height,
-                '--u-padding-single': paddingSingle,
-                '--u-padding-multiple': paddingMultiple,
+                '--u-padding': `${paddingTop} 
+          ${(0, seemly_1.pxfy)((0, seemly_1.depx)(paddingRight) + (0, seemly_1.depx)(arrowSize))} 
+          ${paddingBottom} 
+          ${paddingLeft}`,
+                '--u-padding-top': paddingTop,
+                '--u-padding-right': paddingRight,
+                '--u-padding-left': paddingLeft,
+                '--u-padding-bottom': paddingBottom,
                 '--u-placeholder-color': placeholderColor,
                 '--u-placeholder-color-disabled': placeholderColorDisabled,
                 '--u-text-color': textColor,
@@ -391,7 +422,38 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-clear-color-hover': clearColorHover,
                 '--u-clear-color-pressed': clearColorPressed,
                 // arrow-size
-                '--u-arrow-size': arrowSize
+                '--u-arrow-size': arrowSize,
+                // secondary
+                '--u-caret-color-secondary': caretColorSecondary,
+                '--u-filter-counter-text-color': filterCounterTextColor,
+                '--u-filter-counter-separator-color': filterCounterSeparatorColor,
+                '--u-filter-counter-text-color-disabled': filterCounterTextColorDisabled,
+                '--u-filter-counter-separator-color-disabled': filterCounterSeparatorColorDisabled,
+                '--u-arrow-color-secondary': arrowColorSecondary,
+                '--u-clear-color-secondary': clearColorSecondary,
+                '--u-color-secondary': colorSecondary,
+                '--u-text-color-secondary': textColorSecondary,
+                '--u-border-secondary': borderSecondary,
+                '--u-arrow-color-disabled-secondary': arrowColorDisabledSecondary,
+                '--u-clear-color-disabled-secondary': clearColorDisabledSecondary,
+                '--u-color-disabled-secondary': colorDisabledSecondary,
+                '--u-text-color-disabled-secondary': textColorDisabledSecondary,
+                '--u-border-disabled-secondary': borderDisabledSecondary,
+                '--u-arrow-color-hover-secondary': arrowColorHoverSecondary,
+                '--u-clear-color-hover-secondary': clearColorHoverSecondary,
+                '--u-color-hover-secondary': colorHoverSecondary,
+                '--u-text-color-hover-secondary': textColorHoverSecondary,
+                '--u-border-hover-secondary': borderHoverSecondary,
+                '--u-arrow-color-active-secondary': arrowColorActiveSecondary,
+                '--u-clear-color-active-secondary': clearColorActiveSecondary,
+                '--u-color-active-secondary': colorActiveSecondary,
+                '--u-text-color-active-secondary': textColorActiveSecondary,
+                '--u-border-active-secondary': borderActiveSecondary,
+                '--u-arrow-color-focus-secondary': arrowColorFocusSecondary,
+                '--u-clear-color-focus-secondary': clearColorFocusSecondary,
+                '--u-color-focus-secondary': colorFocusSecondary,
+                '--u-text-color-focus-secondary': textColorFocusSecondary,
+                '--u-border-focus-secondary': borderFocusSecondary
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -445,19 +507,29 @@ exports.default = (0, vue_1.defineComponent)({
             renderLabel: props.renderLabel,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
-            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            showSuffixClear: showSuffixClearRef,
+            filterCounterVisible: filterCounterVisibleRef,
+            filterCounterLength: filterCounterLengthRef,
+            filterCounterClearable: filterCounterClearableRef,
+            tagSize: tagSizeRef
         };
     },
     render() {
-        const { status, multiple, size, disabled, loadingSkeleton, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
+        const { status, multiple, disabled, loadingSkeleton, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
+        const filterCounterEl = this.filterCounterVisible && !this.disabled ? ((0, vue_1.h)("div", { class: [`${clsPrefix}-base-selection__filter-counter`] }, this.filterCounterLength)) : null;
+        const clear = this.filterCounterClearable ? ((0, vue_1.h)(clear_1.default, { clsPrefix: clsPrefix, show: true, onClear: this.handleClear })) : null;
         const suffix = ((0, vue_1.h)(_utils_1.Wrapper, null, {
-            default: () => ((0, vue_1.h)(suffix_1.default, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.mergedClearable && this.selected, onClear: this.handleClear }, {
-                default: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
-            }))
+            default: () => ((0, vue_1.h)("div", { class: [`${clsPrefix}-base-selection__suffix-wrapper`] },
+                (0, vue_1.h)(suffix_1.default, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.showSuffixClear, onClear: this.handleClear }, {
+                    default: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
+                }),
+                filterCounterEl,
+                clear))
         }));
         let body;
         if (multiple) {
@@ -467,7 +539,7 @@ exports.default = (0, vue_1.defineComponent)({
                 handleClose: () => {
                     this.handleDeleteOption(option);
                 }
-            })) : ((0, vue_1.h)(tag_1.UTag, { size: size, closable: !option.disabled, disabled: disabled, onClose: () => {
+            })) : ((0, vue_1.h)(tag_1.UTag, { size: this.tagSize, closable: !option.disabled, disabled: disabled, onClose: () => {
                     this.handleDeleteOption(option);
                 }, internalCloseIsButtonTag: false, internalCloseFocusable: false }, {
                 default: () => renderLabel
@@ -483,19 +555,19 @@ exports.default = (0, vue_1.defineComponent)({
             // May Overflow
             const renderCounter = maxTagCountResponsive
                 ? () => ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, ref: "counterWrapperRef" },
-                    (0, vue_1.h)(tag_1.UTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
+                    (0, vue_1.h)(tag_1.UTag, { size: this.tagSize, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
                 : undefined;
             let counter;
             if (maxTagCountNumeric) {
                 const rest = this.selectedOptions.length - maxTagCount;
                 if (rest > 0) {
                     counter = ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: "__counter__" },
-                        (0, vue_1.h)(tag_1.UTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
+                        (0, vue_1.h)(tag_1.UTag, { size: this.tagSize, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
                             default: () => `+${rest}`
                         })));
                 }
             }
-            const tags = maxTagCountResponsive ? (filterable ? ((0, vue_1.h)(vueuc_1.VOverflow, { ref: "overflowRef", updateCounter: this.updateCounter, getCounter: this.getCounter, getTail: this.getTail, style: {
+            const tags = this.filterCounterVisible ? (this.pattern ? null : (this.placeholder)) : maxTagCountResponsive ? (filterable ? ((0, vue_1.h)(vueuc_1.VOverflow, { ref: "overflowRef", updateCounter: this.updateCounter, getCounter: this.getCounter, getTail: this.getTail, style: {
                     width: '100%',
                     display: 'flex',
                     overflow: 'hidden'
@@ -551,8 +623,8 @@ exports.default = (0, vue_1.defineComponent)({
         else {
             if (filterable) {
                 const hasInput = this.pattern || this.isComposing;
-                const showPlaceholder = this.active ? !hasInput : !this.selected;
-                const showSelectedLabel = this.active ? false : this.selected;
+                const showPlaceholder = !hasInput && !this.selected;
+                const showSelectedLabel = !hasInput && this.selected;
                 body = ((0, vue_1.h)("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
                     (0, vue_1.h)("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
                     showSelectedLabel ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" },
@@ -589,6 +661,8 @@ exports.default = (0, vue_1.defineComponent)({
                 status && `${clsPrefix}-base-selection--${status}-status`,
                 {
                     [`${clsPrefix}-base-selection--active`]: this.active,
+                    [`${clsPrefix}-base-selection--secondary`]: this.secondary,
+                    [`${clsPrefix}-base-selection--secondary-selected`]: this.secondary && this.selected,
                     [`${clsPrefix}-base-selection--selected`]: this.selected || (this.active && this.pattern),
                     [`${clsPrefix}-base-selection--disabled`]: this.disabled,
                     [`${clsPrefix}-base-selection--multiple`]: this.multiple,
@@ -598,13 +672,13 @@ exports.default = (0, vue_1.defineComponent)({
                     // many redundant codes.
                     [`${clsPrefix}-base-selection--focus`]: this.focused
                 }
-            ], style: this.cssVars, onClick: this.onClick, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onKeydown: this.onKeydown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onMousedown: this.handleMouseDown },
+            ], style: this.cssVars, onClick: this.onClick, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onKeydown: this.onKeydown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onMousedown: this.handleMouseDown }, loadingSkeleton ? ((0, vue_1.h)(_internal_1.UBaseSkeleton, { sharp: false, round: this.round, class: [
+                `${clsPrefix}-base-selection__loading`,
+                `${clsPrefix}-base-selection__loading--skeleton`
+            ] })) : ([
             body,
             bordered ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection__border` })) : null,
-            bordered ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection__state-border` })) : null,
-            loadingSkeleton ? ((0, vue_1.h)(_internal_1.UBaseSkeleton, { sharp: false, class: [
-                    `${clsPrefix}-base-selection__loading`,
-                    `${clsPrefix}-base-selection__loading--skeleton`
-                ] })) : null));
+            bordered ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection__state-border` })) : null
+        ])));
     }
 });

package/lib/_internal/selection/src/interface.d.ts

@@ -4,3 +4,4 @@ export type RenderTag = (props: {
     option: SelectOption;
     handleClose: () => void;
 }) => VNodeChild;
+export type SelectSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge';

package/lib/_internal/selection/src/styles/index.cssr.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("css-render").CNode;
+import { type CNode } from 'css-render';
+declare const _default: CNode;
 export default _default;

package/lib/_internal/selection/src/styles/index.cssr.js

@@ -1,21 +1,16 @@
 "use strict";
 
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 const cssr_1 = require("../../../../_utils/cssr");
-const _common_1 = __importDefault(require("../../../../_styles/common/_common"));
 // vars:
 // --u-bezier
 // --u-border
 // --u-border-active
 // --u-border-focus
 // --u-border-hover
+// --u-border-disabled
 // --u-border-radius
 // --u-box-shadow-active
 // --u-box-shadow-focus
@@ -24,19 +19,95 @@ const _common_1 = __importDefault(require("../../../../_styles/common/_common"))
 // --u-color
 // --u-color-active
 // --u-color-disabled
+// --u-line-height
 // --u-font-size
+// --u-font-weight
 // --u-height
-// --u-padding-single
-// --u-padding-multiple
+// --u-padding
+// --u-padding-top
+// --u-padding-right
+// --u-padding-left
+// --u-padding-bottom
 // --u-placeholder-color
 // --u-placeholder-color-disabled
 // --u-text-color
 // --u-text-color-disabled
 // --u-arrow-color
-// --u-arrow-size
+// --u-arrow-color-hover
+// --u-arrow-color-disabled
 // --u-loading-color
-// ...clear vars
-// ...form item vars
+// --u-color-active-warning
+// --u-box-shadow-focus-warning
+// --u-box-shadow-active-warning
+// --u-box-shadow-hover-warning
+// --u-border-warning
+// --u-border-focus-warning
+// --u-border-hover-warning
+// --u-border-active-warning
+// --u-color-active-error
+// --u-box-shadow-focus-error
+// --u-box-shadow-active-error
+// --u-box-shadow-hover-error
+// --u-border-error
+// --u-border-focus-error
+// --u-border-hover-error
+// --u-border-active-error
+// --u-clear-size
+// --u-clear-color
+// --u-clear-color-hover
+// --u-clear-color-pressed
+// --u-arrow-size
+// --u-caret-color-secondary
+// --u-filter-counter-text-color
+// --u-filter-counter-separator-color
+// --u-filter-counter-text-color-disabled
+// --u-filter-counter-separator-color-disabled
+// --u-arrow-color-secondary
+// --u-clear-color-secondary
+// --u-color-secondary
+// --u-text-color-secondary
+// --u-border-secondary
+// --u-arrow-color-disabled-secondary
+// --u-clear-color-disabled-secondary
+// --u-color-disabled-secondary
+// --u-text-color-disabled-secondary
+// --u-border-disabled-secondary
+// --u-arrow-color-hover-secondary
+// --u-clear-color-hover-secondary
+// --u-color-hover-secondary
+// --u-text-color-hover-secondary
+// --u-border-hover-secondary
+// --u-arrow-color-active-secondary
+// --u-clear-color-active-secondary
+// --u-color-active-secondary
+// --u-text-color-active-secondary
+// --u-border-active-secondary
+// --u-arrow-color-focus-secondary
+// --u-clear-color-focus-secondary
+// --u-color-focus-secondary
+// --u-text-color-focus-secondary
+// --u-border-focus-secondary
+function generateSecondaryStates(state) {
+  return [(0, cssr_1.cB)('base-selection-input', `
+ color: var(--u-text-color${state}-secondary);
+ `), (0, cssr_1.cB)('base-selection-input-tag', [(0, cssr_1.cE)('input', `
+ color: var(--u-text-color${state}-secondary);
+ `)]), (0, cssr_1.cB)('base-selection-label', `
+ background-color: var(--u-color${state}-secondary);
+ color: var(--u-text-color${state}-secondary);
+ `, [(0, cssr_1.cE)('render-label', `
+ color: var(--u-text-color${state}-secondary);
+ `)]), (0, cssr_1.cB)('base-selection-tags', `
+ background-color: var(--u-color${state}-secondary);
+ color: var(--u-text-color${state}-secondary);
+ `), (0, cssr_1.cE)('border,state-border', `
+ border: var(--u-border${state}-secondary);
+ `), (0, cssr_1.cB)('base-clear', [(0, cssr_1.cE)('clear', `
+ color: var(--u-clear-color${state}-secondary);
+ `)]), (0, cssr_1.cB)('base-suffix', [(0, cssr_1.cE)('arrow', `
+ color: var(--u-arrow-color${state}-secondary);
+ `)])];
+}
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  position: relative;
  z-index: auto;
@@ -47,11 +118,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  vertical-align: bottom;
  border-radius: var(--u-border-radius);
  min-height: var(--u-height);
- line-height: 1.5;
+ line-height: var(--u-line-height);
  font-size: var(--u-font-size);
- font-weight: var(--u-font-weight-strong);
- `, [(0, cssr_1.cB)('base-clear', [(0, cssr_1.cE)('clear', `
- margin: 4px 0 0 4px;
+ font-weight: var(--u-font-weight);
+ `, [(0, cssr_1.cB)('base-clear', [(0, cssr_1.cE)('placeholder', `
+ font-size: var(--u-arrow-size);
  `)]), (0, cssr_1.cB)('base-loading', `
  color: var(--u-loading-color);
  `), (0, cssr_1.cB)('base-selection-tags', 'min-height: var(--u-height);'), (0, cssr_1.cE)('border, state-border', `
@@ -69,14 +140,25 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  `), (0, cssr_1.cE)('state-border', `
  z-index: 1;
  border-color: #0000;
- `), (0, cssr_1.cB)('base-suffix', `
- cursor: pointer;
+ `), (0, cssr_1.cE)('suffix-wrapper', `
+ display: flex;
+ align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
- right: 24px;
- `, [(0, cssr_1.cE)('arrow', `
+ right: var(--u-padding-right);
+ `, [(0, cssr_1.cB)('base-clear', `
+ font-size: var(--u-clear-size);
+ `)]), (0, cssr_1.cE)('filter-counter', `
+ border-left: 1px solid var(--u-filter-counter-separator-color);
+ width: 28px;
+ margin-left: 6px;
+ padding-left: 2px;
+ text-align: center;
+ color: var(--u-filter-counter-text-color);
+ `), (0, cssr_1.cB)('base-suffix', `
  font-size: var(--u-arrow-size);
+ `, [(0, cssr_1.cE)('arrow', `
  color: var(--u-arrow-color);
  transition: color .3s var(--u-bezier);
  `)]), (0, cssr_1.cB)('base-selection-overlay', `
@@ -89,7 +171,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  right: 0;
  bottom: 0;
  left: 0;
- padding: var(--u-padding-single);
+ padding: var(--u-padding);
  transition: color .3s var(--u-bezier);
  `, [(0, cssr_1.cE)('wrapper', `
  flex-basis: 0;
@@ -109,7 +191,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  position: relative;
  z-index: auto;
  display: flex;
- padding: var(--u-padding-multiple);
+ padding: var(--u-padding);
+ padding-top: 4px;
+ padding-bottom: 4px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
@@ -145,7 +229,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  box-sizing: border-box;
  border:none;
  width: 100%;
- padding: var(--u-padding-single);
+ padding: var(--u-padding);
  background-color: #0000;
  color: var(--u-text-color);
  transition: color .3s var(--u-bezier);
@@ -156,7 +240,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  white-space: nowrap; 
  `)]), (0, cssr_1.cE)('render-label', `
  color: var(--u-text-color);
- `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
+ `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('secondary', [(0, cssr_1.cB)('base-selection-placeholder', `
+ color: var(--u-text-color);
+ `)]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
  box-shadow: var(--u-box-shadow-hover);
  border: var(--u-border-hover);
  `), (0, cssr_1.cB)('base-suffix', [(0, cssr_1.cE)('arrow', `
@@ -173,6 +259,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  color: var(--u-arrow-color-hover);
  `)]), (0, cssr_1.cB)('base-selection-label', 'background-color: var(--u-color-active);'), (0, cssr_1.cB)('base-selection-tags', 'background-color: var(--u-color-active);')])]), (0, cssr_1.cM)('skeleton', 'cursor: not-allowed;'), (0, cssr_1.cM)('disabled', 'cursor: not-allowed;', [(0, cssr_1.cE)('border', `
  border: var(--u-border-disabled);
+ `), (0, cssr_1.cE)('filter-counter', `
+ color: var(--u-filter-counter-text-color-disabled);
+ border-color: var(--u-filter-counter-separator-color-disabled);
  `), (0, cssr_1.cB)('base-suffix', [(0, cssr_1.cE)('arrow', `
  color: var(--u-arrow-color-disabled);
  `)]), (0, cssr_1.cB)('base-selection-label', `
@@ -187,19 +276,17 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  max-width: 100%;
  display: inline-flex;
  padding: 2px 8px 2px 0;
- `, [(0, cssr_1.cB)('tag', 'background-color: #E7E8EA;')]), (0, cssr_1.cB)('base-selection-tags', `
+ `), (0, cssr_1.cB)('base-selection-tags', `
  cursor: not-allowed;
  background-color: var(--u-color-disabled);
  `), (0, cssr_1.cB)('base-selection-placeholder', `
  cursor: not-allowed;
  color: var(--u-placeholder-color-disabled);
- `)]), (0, cssr_1.cB)('base-selection-input-tag', `
- height: calc(var(--u-height) - 6px);
- line-height: calc(var(--u-height) - 6px);
+ `), (0, cssr_1.cM)('secondary-selected', [generateSecondaryStates('-disabled')])]), (0, cssr_1.cB)('base-selection-input-tag', `
+ line-height: calc(var(--u-height) - 12px);
  outline: none;
  display: none;
  position: relative;
- margin-bottom: 3px;
  max-width: 100%;
  vertical-align: bottom;
  `, [(0, cssr_1.cE)('input', `
@@ -230,20 +317,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  max-width: 100%;
  display: inline-flex;
  padding: 2px 8px 2px 0;
- `, [(0, cssr_1.cB)('tag', 'background-color: var(--u-color);')]), ['warning', 'error'].map(status => (0, cssr_1.cM)(`${status}-status`, [(0, cssr_1.cE)('state-border', `border: var(--u-border-${status});`), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--u-box-shadow-hover-${status});
- border: var(--u-border-hover-${status});
- `)]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('state-border', `
+ `, [(0, cssr_1.cB)('tag', 'background-color: var(--u-color);')]), (0, cssr_1.cM)('secondary-selected', [generateSecondaryStates(''), (0, cssr_1.cB)('base-selection-input', `
+ caret-color: var(--u-caret-color-secondary);
+ `), (0, cssr_1.cB)('base-selection-tags', `
+ padding-right: calc(var(--u-padding-right) + var(--u-arrow-size) + 37px + var(--u-clear-size));
+ `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [generateSecondaryStates('-hover'), (0, cssr_1.cB)('base-clear', '--u-clear-color-hover: var(--u-clear-color-hover-secondary)')]), (0, cssr_1.cM)('focus', [generateSecondaryStates('-focus')]), (0, cssr_1.cM)('active', [generateSecondaryStates('-active')])])]), ['warning', 'error'].map(status => (0, cssr_1.cM)(`${status}-status`, [(0, cssr_1.cE)('state-border', `border: var(--u-border-${status});`), (0, cssr_1.cNotM)('secondary-selected', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('base-selection-label', `background-color: var(--u-color-active-${status});`), (0, cssr_1.cB)('base-selection-tags', `background-color: var(--u-color-active-${status});`)])])]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('active', [(0, cssr_1.cE)('state-border', `
  box-shadow: var(--u-box-shadow-active-${status});
  border: var(--u-border-active-${status});
- `), (0, cssr_1.cB)('base-selection-label', `background-color: var(--u-color-active-${status});`), (0, cssr_1.cB)('base-selection-tags', `background-color: var(--u-color-active-${status});`)]), (0, cssr_1.cM)('focus', [(0, cssr_1.cE)('state-border', `
+ `)]), (0, cssr_1.cM)('focus', [(0, cssr_1.cE)('state-border', `
  box-shadow: var(--u-box-shadow-focus-${status});
  border: var(--u-border-focus-${status});
+ `)]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
+ box-shadow: var(--u-box-shadow-hover-${status});
+ border: var(--u-border-hover-${status});
  `)])])])), (0, cssr_1.cE)('loading', null, [(0, cssr_1.cM)('skeleton', {
-  width: `calc(100% + ${_common_1.default.borderWidth * 2}px)`,
-  height: `calc(100% + ${_common_1.default.borderWidth * 2}px)`,
-  left: `-${_common_1.default.borderWidth}px`,
-  top: `-${_common_1.default.borderWidth}px`,
+  width: 'calc(100% + 2px)',
+  height: 'calc(100% + 2px)',
+  left: '-1px',
+  top: '-1px',
   position: 'absolute',
   zIndex: 2,
   borderRadius: 'var(--u-border-radius)',
@@ -258,10 +349,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  display: inline-flex;
  padding: 2px 8px 2px 0;
  `, [(0, cssr_1.c)('&:last-child', 'padding-right: 0;'), (0, cssr_1.cB)('tag', `
- font-size: 14px;
  max-width: 100%;
- background-color: var(--u-color-disabled);
- border-radius: calc(var(--u-height) / 2);
  `, [(0, cssr_1.cE)('content', `
  line-height: 20px;
  font-weight: 500;

package/lib/_internal/selection/styles/dark.js

@@ -1,41 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const seemly_1 = require("seemly");
 const common_1 = require("../../../_styles/common");
 const styles_1 = require("../../../popover/styles");
-const _common_1 = __importDefault(require("./_common"));
+const light_1 = require("./light");
 const internalSelectionDark = {
     name: 'InternalSelection',
     common: common_1.commonDark,
     peers: {
         Popover: styles_1.popoverDark
     },
-    self(vars) {
-        const { borderRadius, textColor2, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeLarge, buttonColor2Hover } = vars;
-        return Object.assign(Object.assign({}, _common_1.default), { fontSizeTiny,
-            fontSizeSmall, fontSizeMedium: '16px', fontSizeLarge, heightTiny: '32px', heightSmall: '40px', heightMedium: '48px', heightLarge: '56px', borderRadius, 
-            // default
-            textColor: textColor2, textColorDisabled: '#808080', placeholderColor,
-            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), border: `2px solid ${buttonColor2Hover}`, borderHover: `2px solid ${primaryColorHover}`, borderActive: `2px solid ${primaryColor}`, borderFocus: `2px solid ${primaryColorHover}`, borderDisabled: `1px solid ${buttonColor2Hover}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 0 ${(0, seemly_1.changeColor)(primaryColor, {
-                alpha: 0.2
-            })}`, boxShadowFocus: `0 0 0 0 ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorHover: primaryColor, arrowColorDisabled: iconColorDisabled, loadingColor: iconColor, 
-            // warning
-            borderWarning: `2px solid ${warningColor}`, borderHoverWarning: `2px solid ${warningColorHover}`, borderActiveWarning: `2px solid ${warningColor}`, borderFocusWarning: `2px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 0 ${(0, seemly_1.changeColor)(warningColor, {
-                alpha: 0.2
-            })}`, boxShadowFocusWarning: `0 0 0 0 ${(0, seemly_1.changeColor)(warningColor, {
-                alpha: 0.2
-            })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, 
-            // error
-            borderError: `2px solid ${errorColor}`, borderHoverError: `2px solid ${errorColorHover}`, borderActiveError: `2px solid ${errorColor}`, borderFocusError: `2px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 0 ${(0, seemly_1.changeColor)(errorColor, {
-                alpha: 0.2
-            })}`, boxShadowFocusError: `0 0 0 0 ${(0, seemly_1.changeColor)(errorColor, {
-                alpha: 0.2
-            })}`, colorActiveError: inputColor, caretColorError: errorColor, clearColor,
-            clearColorHover,
-            clearColorPressed });
-    }
+    self: light_1.self
 };
 exports.default = internalSelectionDark;