webcake-ui-kit 1.3.10 → 1.3.12

package/package.json

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

package/src/components/badge/badge.css

@@ -11,8 +11,6 @@
   font-weight: 500;
   white-space: nowrap;
   transition: box-shadow 0.15s ease;
-  border-width: 1px;
-  border-style: solid;
   height: 20px;
 }
 
@@ -24,39 +22,33 @@
 }
 
 .ui-badge--primary {
-  background: var(--positive-subtle);
-  color: var(--primary-brand-fg);
-  border-color: var(--positive-border-subtle);
+  background: var(--color-emerald-100);
+  color: var(--color-emerald-700);
 }
 .ui-badge--secondary {
   background: var(--tertiary-bg);
   color: var(--secondary-fg);
-  border: none;
 }
 .ui-badge--outline {
   background: var(--outline);
   color: var(--primary-fg);
-  border-color: var(--border-primary);
+  border: 1px solid var(--border-primary);
 }
 .ui-badge--ghost {
   background: var(--ghost);
   color: var(--primary-fg);
-  border: none;
 }
 .ui-badge--destructive {
-  background: var(--destructive-subtle);
-  color: var(--destructive);
-  border-color: var(--destructive-border-subtle);
+  background: var(--color-red-100);
+  color: var(--color-red-700);
 }
 .ui-badge--info {
-  background: var(--infor-subtle);
-  color: var(--infor);
-  border-color: var(--infor-border-subtle);
+  background: var(--color-blue-100);
+  color: var(--color-blue-700);
 }
 .ui-badge--warning {
-  background: var(--warning-subtle);
-  color: var(--warning);
-  border-color: var(--warning-border-subtle);
+  background: var(--color-amber-100);
+  color: var(--color-amber-700);
 }
 
 .ui-badge:focus-visible {

package/src/components/checkbox/Checkbox.vue

@@ -10,24 +10,29 @@
       @change="onChange"
     />
     <span class="ui-checkbox__box" aria-hidden="true">
-      <WkiCheck v-if="isChecked" :size="14" />
+      <template v-if="isChecked">
+        <WkiMinus v-if="iconType === 'minus'" :size="14" />
+        <WkiCheck v-else :size="14" />
+      </template>
     </span>
   </span>
 </template>
 
 <script>
 import WkiCheck from '../../icons/Check.vue'
+import WkiMinus from '../../icons/Minus.vue'
 
 export default {
   name: 'Checkbox',
-  components: { WkiCheck },
+  components: { WkiCheck, WkiMinus },
   inheritAttrs: false,
   model: { prop: 'checked', event: 'change' },
   props: {
     checked: { type: Boolean, default: false },
     modelValue: { type: Boolean, default: undefined },
     error: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    iconType: { type: String, default: 'default', validator: v => ['default', 'minus'].includes(v) }
   },
   emits: ['change', 'update:modelValue'],
   computed: {

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -5,6 +5,7 @@
       :checked="isChecked"
       :error="error"
       :disabled="disabled"
+      :iconType="iconType"
       @change="onChange"
     />
     <span class="ui-checkbox-group__label">
@@ -30,7 +31,8 @@ export default {
     modelValue: { type: Boolean, default: undefined },
     error: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    label: { type: String, default: '' }
+    label: { type: String, default: '' },
+    iconType: { type: String, default: 'default', validator: v => ['default', 'minus'].includes(v) }
   },
   emits: ['change', 'update:modelValue'],
   computed: {

package/src/components/input/Input.vue

@@ -8,6 +8,7 @@
       disabled && 'ui-input--disabled',
       $attrs.class
     ]"
+    @click="onClick"
   >
     <span v-if="hasPrefix()" class="ui-input__decoration ui-input__prefix" aria-hidden="true">
       <slot name="prefix"></slot>
@@ -59,7 +60,7 @@ export default {
     readonly: { type: Boolean, default: false },
     centered: { type: Boolean, default: false }
   },
-  emits: ['input', 'change', 'update:modelValue', 'focus', 'blur', 'pressEnter'],
+  emits: ['input', 'change', 'update:modelValue', 'focus', 'blur', 'pressEnter', 'click'],
   computed: {
     currentValue() {
       return this.modelValue !== undefined ? this.modelValue : this.value
@@ -94,6 +95,9 @@ export default {
       if (e.key === 'Enter') {
         this.$emit('pressEnter', e.target.value, e)
       }
+    },
+    onClick(e) {
+      this.$emit('click', e)
     }
   }
 }

package/src/components/select/Select.vue

@@ -4,7 +4,7 @@
     :disabled="disabled || loading"
     :placement="placement"
     :offset="4"
-    :anchor-width="dropdownMatchSelectWidth"
+    :anchor-width="effectiveDropdownMatchSelectWidth"
     :close-on-select="false"
     @change="onMenuChange"
     @close="onMenuClose"
@@ -87,37 +87,50 @@
         </span>
       </div>
     </template>
-    <div class="ui-select__list" :style="listStyle">
-      <div v-if="hasContentHeader()">
-        <slot name="contentHeader"></slot>
+    <div class="ui-select__columns">
+      <div class="ui-select__list" :style="listStyle">
+        <div v-if="hasContentHeader()">
+          <slot name="contentHeader"></slot>
+        </div>
+        <slot>
+          <SelectOption
+            v-for="opt in filteredOptions"
+            :key="opt.value"
+            :value="opt.value"
+            :label="opt.label"
+            :mark-label="opt.markLabel"
+            :disabled="opt.disabled"
+            :children="opt.children"
+            :placement="opt.placement"
+            :offset="opt.offset"
+          />
+        </slot>
+        <slot v-if="showEmpty" name="empty">
+          <Empty description="No data">
+            <template #media>
+              <div class="select-empty">
+                <img
+                  src="https://content.pancake.vn/web-media-262/2e/2a/0c/96/c2b58ae9f06c4dc2a3b83016e56d5b4132ff40637862ba23435e43a0-w:224-h:224-l:3927-t:image/png.png"
+                />
+              </div>
+            </template>
+          </Empty>
+        </slot>
+        <div v-if="hasContentFooter()">
+          <slot name="contentFooter"></slot>
+        </div>
       </div>
-      <slot>
+      <div v-for="(col, idx) in expandedColumns" :key="col.ownerValue" class="ui-select__list" :style="listStyle">
         <SelectOption
-          v-for="opt in filteredOptions"
+          v-for="opt in col.children"
           :key="opt.value"
           :value="opt.value"
           :label="opt.label"
           :mark-label="opt.markLabel"
           :disabled="opt.disabled"
-          :children="opt.children"
-          :placement="opt.placement"
-          :width="opt.width"
-          :offset="opt.offset"
+          :children="opt.children || []"
+          :column-depth="idx + 1"
         />
-      </slot>
-      <slot v-if="showEmpty" name="empty">
-        <Empty description="No data">
-          <template #media>
-            <div class="select-empty">
-              <img
-                src="https://content.pancake.vn/web-media-262/2e/2a/0c/96/c2b58ae9f06c4dc2a3b83016e56d5b4132ff40637862ba23435e43a0-w:224-h:224-l:3927-t:image/png.png"
-              />
-            </div>
-          </template>
-        </Empty>
-      </slot>
-      <div v-if="hasContentFooter()">
-        <slot name="contentFooter"></slot>
       </div>
     </div>
   </Menu>
@@ -203,6 +216,10 @@ export default {
       type: [Number, String],
       default: 256
     },
+    listWidth: {
+      type: [Number, String],
+      default: null
+    },
     mode: {
       type: String,
       default: 'single',
@@ -236,7 +253,8 @@ export default {
       labelCache: {},
       filterText: '',
       tagOptions: [],
-      slotOptionVisible: {}
+      slotOptionVisible: {},
+      expandedColumns: []
     }
   },
 
@@ -274,7 +292,6 @@ export default {
               disabled: !!opt.disabled,
               children: opt.children || [],
               placement: opt.placement || 'right-start',
-              width: opt.width || null,
               offset: opt.offset || null
             }
       })
@@ -335,9 +352,25 @@ export default {
       if (this.normalizedOptions.length === 0 && Object.keys(this.slotOptionVisible).length === 0) return true
       return false
     },
+    effectiveDropdownMatchSelectWidth() {
+      if (
+        this.normalizedOptions.some(function (opt) {
+          return opt.children && opt.children.length > 0
+        })
+      ) {
+        return false
+      }
+      return this.dropdownMatchSelectWidth
+    },
     listStyle() {
-      if (typeof this.listHeight === 'number') return { maxHeight: this.listHeight + 'px' }
-      return { maxHeight: this.listHeight }
+      var style = {}
+      style.maxHeight = typeof this.listHeight === 'number' ? this.listHeight + 'px' : this.listHeight
+      if (this.listWidth != null) {
+        var w = typeof this.listWidth === 'number' ? this.listWidth + 'px' : this.listWidth
+        style.width = w
+        style.minWidth = w
+      }
+      return style
     },
     externalClass() {
       // Vue 3: class is in $attrs (inheritAttrs:false keeps it off the root)
@@ -567,6 +600,29 @@ export default {
         return null
       }
       return scan(this._slotNodes())
+    },
+    expandColumn(depth, ownerValue, children) {
+      var existing = this.expandedColumns[depth]
+      if (existing && existing.ownerValue === ownerValue) {
+        this.expandedColumns = this.expandedColumns.slice(0, depth)
+      } else {
+        this.expandedColumns = this.expandedColumns.slice(0, depth).concat([
+          {
+            ownerValue: ownerValue,
+            children: children || []
+          }
+        ])
+      }
+    },
+    openColumn(depth, ownerValue, children) {
+      var existing = this.expandedColumns[depth]
+      if (existing && existing.ownerValue === ownerValue) return
+      this.expandedColumns = this.expandedColumns.slice(0, depth).concat([
+        {
+          ownerValue: ownerValue,
+          children: children || []
+        }
+      ])
     }
   }
 }

package/src/components/select/select.css

@@ -239,6 +239,7 @@
   overflow-y: auto;
   padding: var(--spacing-2xs);
   gap: var(--spacing-3xs);
+  flex: 1 0 0;
 }
 
 .ui-select__list::-webkit-scrollbar {
@@ -250,6 +251,20 @@
   border-radius: 3px;
 }
 
+.ui-select__columns {
+  display: flex;
+  align-items: stretch;
+}
+
+.ui-select__columns > .ui-select__list {
+  flex: 1 1 0;
+  min-width: 160px;
+}
+
+.ui-select__columns > .ui-select__list + .ui-select__list {
+  border-left: 1px solid var(--border-primary);
+}
+
 .ui-select__list ::v-deep .select-empty {
   height: 100px;
   width: 100px;

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

@@ -1,68 +1,56 @@
 <template>
   <div
     v-show="!isHidden"
-    class="ui-select-option"
-    :class="[
-      effectiveSize === 'sm' ? 'ui-select-option--sm' : null,
-      effectiveSize === 'md' ? 'ui-select-option--md' : null,
-      effectiveSize === 'lg' ? 'ui-select-option--lg' : null,
-      variant === 'destructive' ? 'ui-select-option--destructive' : null,
-      isDisabled ? 'ui-select-option--disabled' : null,
-      isSelected ? 'ui-select-option--selected' : null
-    ]"
-    role="option"
-    :aria-selected="isSelected ? 'true' : 'false'"
-    :aria-disabled="isDisabled ? 'true' : null"
-    @click.stop="handleClick"
+    class="ui-select-option-wrapper"
+    :class="{ 'ui-select-option-wrapper--expanded': isExpanded }"
   >
-    <span v-if="hasPrefix()" class="ui-select-option__prefix">
-      <slot name="prefix" />
-    </span>
-    <span class="ui-select-option--label">
-      <slot>{{ label || value }}</slot>
-    </span>
-    <span v-if="hasSuffix()" class="ui-select-option__suffix">
-      <slot name="suffix" />
-    </span>
-    <WkiCheck
-      v-if="isSelected && (isMultiMode || isShowChecked) && children.length === 0"
-      :size="16"
-      color="var(--muted-fg)"
-    />
-
-    <Dropdown v-if="children.length > 0" :placement="placement" :width="width || 280" :offset="offset">
-      <div class="expand-trigger">
+    <div
+      class="ui-select-option"
+      :class="[
+        effectiveSize === 'sm' ? 'ui-select-option--sm' : null,
+        effectiveSize === 'md' ? 'ui-select-option--md' : null,
+        effectiveSize === 'lg' ? 'ui-select-option--lg' : null,
+        variant === 'destructive' ? 'ui-select-option--destructive' : null,
+        isDisabled ? 'ui-select-option--disabled' : null,
+        isSelected ? 'ui-select-option--selected' : null,
+        hasChildren ? 'ui-select-option--has-children' : null,
+        isExpanded ? 'ui-select-option--expanded' : null
+      ]"
+      role="option"
+      :aria-selected="isSelected ? 'true' : 'false'"
+      :aria-disabled="isDisabled ? 'true' : null"
+      :aria-haspopup="hasChildren ? 'true' : null"
+      :aria-expanded="hasChildren ? (isExpanded ? 'true' : 'false') : null"
+      @click.stop="handleClick"
+    >
+      <span v-if="hasPrefix()" class="ui-select-option__prefix">
+        <slot name="prefix" />
+      </span>
+      <span class="ui-select-option--label">
+        <slot>{{ label || value }}</slot>
+      </span>
+      <span v-if="hasSuffix()" class="ui-select-option__suffix">
+        <slot name="suffix" />
+      </span>
+      <WkiCheck
+        v-if="isSelected && (isMultiMode || isShowChecked) && !hasChildren"
+        :size="16"
+        color="var(--muted-fg)"
+      />
+      <span v-if="hasChildren" class="ui-select-option__expand">
         <WkiChevronRight :size="16" />
-      </div>
-      <template #overlay>
-        <div class="ui-select__list">
-          <SelectOption
-            v-for="opt in children"
-            :key="opt.value"
-            :value="opt.value"
-            :label="opt.label"
-            :mark-label="opt.markLabel"
-            :disabled="opt.disabled"
-            :children="opt.children"
-            :placement="opt.placement"
-            :width="opt.width"
-            :offset="opt.offset"
-          />
-        </div>
-      </template>
-    </Dropdown>
+      </span>
+    </div>
   </div>
 </template>
 
 <script>
 import { WkiCheck, WkiChevronRight } from '../../icons'
-import Dropdown from '../dropdown/Dropdown.vue'
 export default {
   name: 'SelectOption',
 
   components: {
     WkiCheck,
-    Dropdown,
     WkiChevronRight
   },
 
@@ -109,21 +97,28 @@ export default {
       type: String,
       default: 'right-start'
     },
-    width: {
-      type: [String, Number],
-      default: null
-    },
     offset: {
       type: [String, Number],
       default: null
+    },
+    columnDepth: {
+      type: Number,
+      default: 0
     }
   },
 
   emits: [],
 
+  data() {
+    return {}
+  },
+
   mounted() {
     this._registerLabel()
     if (this.select) this.select.setSlotOptionVisible(this.value, !this.isHidden)
+    if (this.hasChildren && this.isSelected && this.select && typeof this.select.openColumn === 'function') {
+      this.select.openColumn(this.columnDepth, this.value, this.children)
+    }
   },
 
   updated() {
@@ -141,6 +136,11 @@ export default {
   watch: {
     isHidden(val) {
       if (this.select) this.select.setSlotOptionVisible(this.value, !val)
+    },
+    isSelected(val) {
+      if (val && this.hasChildren && this.select && typeof this.select.openColumn === 'function') {
+        this.select.openColumn(this.columnDepth, this.value, this.children)
+      }
     }
   },
 
@@ -149,6 +149,14 @@ export default {
       // explicit prop wins; otherwise inherit from parent Select; else regular
       return this.size || (this.select && (this.select.optionSize || this.select.size)) || 'md'
     },
+    hasChildren() {
+      return Array.isArray(this.children) && this.children.length > 0
+    },
+    isExpanded() {
+      if (!this.select || !this.hasChildren) return false
+      var col = this.select.expandedColumns && this.select.expandedColumns[this.columnDepth]
+      return !!(col && col.ownerValue === this.value)
+    },
     isHidden() {
       if (!this.select || !this.select.filterText) return false
       var q = this.select.filterText.toLowerCase()
@@ -214,6 +222,12 @@ export default {
     },
     handleClick() {
       if (this.isDisabled) return
+      if (this.hasChildren) {
+        if (this.select && typeof this.select.expandColumn === 'function') {
+          this.select.expandColumn(this.columnDepth, this.value, this.children)
+        }
+        return
+      }
       if (this.select && typeof this.select.select === 'function') {
         this.select.select(this.value)
       }
@@ -223,4 +237,3 @@ export default {
 </script>
 
 <style src="./select_option.css" scoped></style>
-<style src="./select_option_sub.css"></style>

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

@@ -1,6 +1,17 @@
+/* Single root: lays the option row and its (optional) inline child column
+   side by side. Top-aligned so the expanded column starts at the option row. */
+.ui-select-option-wrapper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 0;
+}
+
 .ui-select-option {
   display: flex;
   align-items: center;
+  flex: 1 1 0;
+  min-width: 0;
   min-height: 32px;
   border-radius: var(--radius);
   font-family: var(--font-family-body);
@@ -98,3 +109,16 @@
   font-size: var(--paragraph-mini-font-size);
   line-height: var(--paragraph-mini-line-height);
 }
+
+/* Chevron affordance for options that expand a child column. */
+.ui-select-option__expand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--muted-fg);
+}
+
+.ui-select-option--expanded {
+  background: var(--accent-bg);
+}

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

@@ -1,61 +0,0 @@
-.ui-select-option .ui-dropdown__anchor {
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  --submenu-offset: calc(var(--spacing-2xs) + 1px);
-}
-
-.ui-select-option--sm .ui-dropdown__anchor {
-  margin-top: calc(var(--spacing-2xs) * -1 - var(--submenu-offset));
-  margin-right: calc(var(--spacing-xs) * -1);
-  margin-bottom: calc(var(--spacing-2xs) * -1 + var(--submenu-offset));
-  padding: 0 var(--spacing-xs);
-}
-
-.ui-select-option--md .ui-dropdown__anchor {
-  margin-top: calc(var(--spacing-5p5) * -1 - var(--submenu-offset));
-  margin-right: calc(var(--spacing-xs) * -1);
-  margin-bottom: calc(var(--spacing-5p5) * -1 + var(--submenu-offset));
-  padding: 0 var(--spacing-xs);
-}
-
-.ui-select-option--lg .ui-dropdown__anchor {
-  margin-top: calc(var(--spacing-7p5) * -1 - var(--submenu-offset));
-  margin-right: calc(var(--spacing-sm) * -1);
-  margin-bottom: calc(var(--spacing-7p5) * -1 + var(--submenu-offset));
-  padding: 0 var(--spacing-sm);
-}
-
-.expand-trigger {
-  display: flex;
-  align-items: center;
-  transform: translateY(var(--submenu-offset));
-}
-
-.ui-select__list {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  padding: var(--spacing-2xs);
-  gap: var(--spacing-3xs);
-}
-
-.ui-select__list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.ui-select__list::-webkit-scrollbar-thumb {
-  background: var(--border-primary);
-  border-radius: 3px;
-}
-
-.ui-select__list .select-empty {
-  height: 100px;
-  width: 100px;
-}
-
-.ui-select__list .select-empty img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}