webcake-ui-kit 1.1.28 → 1.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.28",
+  "version": "1.1.29",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/alert/Alert.vue

@@ -29,7 +29,8 @@ const ICON_BY_TYPE = {
   neutral: 'WkiCircleCheck',
   error: 'WkiCircleAlert',
   warning: 'WkiTriangleAlert',
-  info: 'WkiInfo'
+  info: 'WkiInfo',
+  success: 'WkiCircleCheck'
 }
 
 export default {
@@ -40,7 +41,7 @@ export default {
       type: String,
       default: 'neutral',
       validator: function (v) {
-        return ['neutral', 'error', 'warning', 'info'].includes(v)
+        return ['neutral', 'error', 'warning', 'info', 'success'].includes(v)
       }
     },
     title: {

package/src/components/alert/alert.css

@@ -42,6 +42,7 @@
   letter-spacing: var(--paragraph-small-letter-spacing);
   font-weight: var(--paragraph-medium-font-weight);
   word-break: break-word;
+  color: var(--primary-fg);
 }
 
 .ui-alert__description {
@@ -69,7 +70,7 @@
   padding: 0;
   border: none;
   background: none;
-  color: inherit;
+  color: var(--primary-fg);
   cursor: pointer;
   border-radius: var(--rounded-md);
   outline: none;
@@ -95,6 +96,9 @@
 .ui-alert--neutral {
   background: var(--card);
   border-color: var(--border-primary);
+}
+
+.ui-alert--neutral .ui-alert__icon {
   color: var(--primary-fg);
 }
 
@@ -104,14 +108,36 @@
   color: var(--destructive-text);
 }
 
+.ui-alert--error .ui-alert__icon {
+  color: var(--destructive);
+}
+
 .ui-alert--warning {
   background: var(--warning-subtle);
   border-color: var(--warning-border-subtle);
-  color: var(--warning-text);
+  color: var(--warning);
+}
+
+.ui-alert--warning .ui-alert__icon {
+  color: var(--warning);
 }
 
 .ui-alert--info {
   background: var(--infor-subtle);
   border-color: var(--infor-border-subtle);
-  color: var(--infor-text);
+  color: var(--infor);
+}
+
+.ui-alert--info .ui-alert__icon {
+  color: var(--infor);
+}
+
+.ui-alert--success {
+  background: var(--positive-subtle);
+  border-color: var(--positive-border-subtle);
+  color: var(--positive);
+}
+
+.ui-alert--success .ui-alert__icon {
+  color: var(--positive);
 }

package/src/components/dropdown/Dropdown.vue

@@ -9,6 +9,8 @@
     @open="$emit('open')"
     @close="$emit('close')"
     :width="width"
+    :overlay-class-name="overlayClassName"
+    :overlay-style="overlayStyle"
   >
     <template #trigger="{ triggerRef }">
       <span
@@ -21,7 +23,14 @@
         <slot></slot>
       </span>
     </template>
-    <DropdownMenuItems v-if="hasItems" :items="items" :value="value" @select="onItemSelect" :size="size" />
+    <DropdownMenuItems
+      v-if="hasItems"
+      :items="items"
+      :value="value"
+      @select="onItemSelect"
+      :size="size"
+      :showChecked="showChecked"
+    />
     <slot v-else name="overlay"></slot>
   </Menu>
 </template>
@@ -80,7 +89,10 @@ export default {
       type: String,
       default: 'md',
       validator: v => ['sm', 'md', 'lg'].includes(v)
-    }
+    },
+    overlayClassName: { type: [String, Array, Object], default: null },
+    overlayStyle: { type: [Object, Array], default: null },
+    showChecked: { type: Boolean, default: false }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],
   data() {

package/src/components/dropdown/DropdownMenuItems.vue

@@ -35,7 +35,7 @@
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
-          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
+          <WkiCheck v-if="isActive(child.key) && showChecked" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -87,7 +87,7 @@
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
-          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
+          <WkiCheck v-if="isActive(child.key) && showChecked" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -116,7 +116,7 @@
           item.label
         }}</span>
         <span v-if="item.extra" class="ui-dropdown-items__extra">{{ item.extra }}</span>
-        <WkiCheck v-if="isActive(item.key)" :size="16" color="var(--muted-fg)" />
+        <WkiCheck v-if="isActive(item.key) && showChecked" :size="16" color="var(--muted-fg)" />
       </div>
     </div>
   </div>
@@ -150,6 +150,10 @@ export default {
     size: {
       type: String,
       default: 'md'
+    },
+    showChecked: {
+      type: Boolean,
+      default: false
     }
   },
 

package/src/components/dropdown/dropdown-menu-items.css

@@ -54,6 +54,10 @@
   background: var(--destructive-subtle) !important;
 }
 
+.ui-dropdown-items__item--destructive.ui-dropdown-items__item--active {
+  background: var(--destructive-subtle) !important;
+}
+
 .ui-dropdown-items__item--sub {
   padding-left: calc(var(--spacing-sm) + var(--spacing-md));
 }
@@ -139,17 +143,6 @@
   user-select: none;
 }
 
-/* 20px container — icon SVG inside is typically 16px, centred */
-.ui-dropdown-items__icon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-}
-
 .ui-dropdown-items__label {
   flex: 1;
   min-width: 0;

package/src/components/input/input.css

@@ -132,13 +132,13 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 20px;
+  min-width: 20px;
   height: 20px;
   color: var(--muted-fg);
 }
 
 .ui-input--size-xs .ui-input__decoration,
 .ui-input--size-tiny .ui-input__decoration {
-  width: 16px;
+  min-width: 16px;
   height: 16px;
 }

package/src/components/menu/Menu.vue

@@ -14,7 +14,7 @@
           role="menu"
           @keydown="_kmOnKeydown"
         >
-          <div class="ui-menu__content">
+          <div :class="['ui-menu__content', overlayClassName]" :style="overlayStyle">
             <slot></slot>
           </div>
         </div>
@@ -67,7 +67,9 @@ export default {
     closeOnEsc: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     anchorWidth: { type: Boolean, default: false },
-    width: { type: [String, Number], default: null }
+    width: { type: [String, Number], default: null },
+    overlayClassName: { type: [String, Array, Object], default: null },
+    overlayStyle: { type: [Object, Array], default: null }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],
   data() {
@@ -182,6 +184,9 @@ export default {
       this.$nextTick(() => {
         const float = this.$refs.floating
         if (!float) return
+        // Tag the floating panel with its trigger so click-outside-mixin can
+        // detect nested portals opened from within this panel.
+        float._wkTrigger = this._triggerEl
         this._coSetElements(this._triggerEl, float)
         this._kmSetFloatEl(float)
         this._pmAttach(this._triggerEl, float)

package/src/components/select/Select.vue

@@ -8,6 +8,8 @@
     :close-on-select="false"
     @change="onMenuChange"
     @close="onMenuClose"
+    :overlay-class-name="overlayClassName"
+    :overlay-style="overlayStyle"
   >
     <template #trigger="{ toggle, isOpen: open, attrs, triggerRef }">
       <div
@@ -187,7 +189,9 @@ export default {
     filterOption: {
       type: Function,
       default: null
-    }
+    },
+    overlayClassName: { type: [String, Array, Object], default: null },
+    overlayStyle: { type: [Object, Array], default: null }
   },
 
   emits: ['change', 'update:modelValue'],

package/src/components/select/select.css

@@ -154,28 +154,30 @@
 
 /* — multiple mode — */
 .ui-select--multiple {
-  height: 36px;
+  min-height: 36px;
+  height: auto;
   align-items: center;
   flex-wrap: wrap;
   padding: var(--spacing-2xs) var(--spacing-sm) var(--spacing-2xs) var(--spacing-xs);
 }
 
 .ui-select--multiple.ui-select--lg {
-  height: 40px;
+  min-height: 40px;
   height: auto;
-  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
+  padding: var(--spacing-7) var(--spacing-md) var(--spacing-7) var(--spacing-xs);
   align-items: center;
 }
 
 .ui-select--multiple.ui-select--sm {
-  height: 32px;
+  min-height: 32px;
   height: auto;
-  padding: var(--spacing-5p5) var(--spacing-xs);
+  padding: var(--spacing-5) var(--spacing-xs);
 }
 
 .ui-select--multiple.ui-select--xs {
-  height: 28px;
-  padding: var(--spacing-2xs) var(--spacing-6) var(--spacing-2xs) var(--spacing-2xs);
+  min-height: 28px;
+  height: auto;
+  padding: var(--spacing-3) var(--spacing-6) var(--spacing-3) var(--spacing-2xs);
 }
 
 .ui-select--multiple .ui-select__chevron {
@@ -211,6 +213,10 @@
   font-size: 14px;
 }
 
+.ui-select--multiple.ui-select--xs .ui-select__search::placeholder {
+  font-size: 12px;
+}
+
 .ui-select__search--single {
   width: 100%;
   flex: 1;

package/src/components/select-option/SelectOption.vue

@@ -15,9 +15,15 @@
     :aria-disabled="isDisabled ? 'true' : null"
     @click="handleClick"
   >
+    <span v-if="$slots.prefix" class="ui-select-option__prefix">
+      <slot name="prefix" />
+    </span>
     <span class="ui-select-option--label">
       <slot>{{ label || value }}</slot>
     </span>
+    <span v-if="$slots.suffix" class="ui-select-option__suffix">
+      <slot name="suffix" />
+    </span>
     <WkiCheck v-if="isSelected && isMultiMode" :size="16" color="var(--muted-fg)" />
   </div>
 </template>

package/src/components/select-option/select_option.css

@@ -78,3 +78,23 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.ui-select-option__prefix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  min-width: 20px;
+  height: 20px;
+}
+
+.ui-select-option--sm .ui-select-option__prefix {
+  min-width: 16px;
+  height: 16px;
+}
+
+.ui-select-option__suffix {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}