webcake-ui-kit 1.2.2 → 1.2.4

package/package.json

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

package/src/components/menu/menu.css

@@ -28,7 +28,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2xs);
-  max-height: 320px;
   overflow-y: auto;
   border-radius: var(--rounded-lg);
 }

package/src/components/popover/Popover.vue

@@ -66,7 +66,7 @@ export default {
       default: 'bottom-start',
       validator: v => PLACEMENTS.indexOf(v) !== -1
     },
-    offset: { type: Number, default: 8 },
+    offset: { type: Number, default: 4 },
     // 'click', 'hover', or both
     trigger: {
       type: Array,

package/src/components/select/Select.vue

@@ -87,6 +87,9 @@
       </div>
     </template>
     <div class="ui-select__list" :style="listStyle">
+      <div v-if="hasContentHeader">
+        <slot name="contentHeader"></slot>
+      </div>
       <slot>
         <SelectOption
           v-for="opt in filteredOptions"
@@ -107,6 +110,9 @@
           </template>
         </Empty>
       </slot>
+      <div v-if="hasContentFooter">
+        <slot name="contentFooter"></slot>
+      </div>
     </div>
   </Menu>
 </template>
@@ -148,6 +154,10 @@ export default {
       default: 'md',
       validator: v => ['sm', 'md', 'lg'].indexOf(v) !== -1
     },
+    showChecked: {
+      type: Boolean,
+      default: false
+    },
     value: {
       type: [String, Array],
       default: null
@@ -287,6 +297,12 @@ export default {
       if (this.normalizedOptions.length === 0 && Object.keys(this.slotOptionVisible).length === 0) return true
       return false
     },
+    hasContentFooter() {
+      return !!((this.$scopedSlots && this.$scopedSlots['contentFooter']) || this.$slots['contentFooter'])
+    },
+    hasContentHeader() {
+      return !!((this.$scopedSlots && this.$scopedSlots['contentHeader']) || this.$slots['contentHeader'])
+    },
     hasIconSlot() {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
     },

package/src/components/select/select.css

@@ -210,7 +210,7 @@
 
 .ui-select__search::placeholder {
   color: var(--muted-fg);
-  font-size: 14px;
+  font-size: inherit;
 }
 
 .ui-select--xs .ui-select__search::placeholder {

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

@@ -24,7 +24,7 @@
     <span v-if="hasSuffix" class="ui-select-option__suffix">
       <slot name="suffix" />
     </span>
-    <WkiCheck v-if="isSelected && isMultiMode" :size="16" color="var(--muted-fg)" />
+    <WkiCheck v-if="isSelected && (isMultiMode || isShowChecked)" :size="16" color="var(--muted-fg)" />
   </div>
 </template>
 
@@ -128,6 +128,9 @@ export default {
     },
     isMultiMode() {
       return !!(this.select && this.select.isMultiMode)
+    },
+    isShowChecked() {
+      return !!(this.select && this.select.showChecked)
     }
   },
 

package/src/components/table-v2/style/table-wrapper.css

@@ -36,10 +36,6 @@
   border-bottom: 1px solid var(--border-primary);
 }
 
-.ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr:last-child td {
-  border-bottom: none;
-}
-
 .ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__header > tr > th:not(:last-child),
 .ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__body > tr > td:not(:last-child) {
   border-inline-end: 1px solid var(--border-primary);

package/src/components/tabs/Tabs.vue

@@ -14,17 +14,15 @@
       :disabled="tab.disabled || undefined"
       @click="select(tab.value)"
     >
-      <div class="ui-tabs__item-inner">
-        <slot name="label" :tab="tab">
-          <span v-if="tab.icon" class="ui-tabs__icon">
-            <slot name="icon" :tab="tab">
-              <component :is="tab.icon" :size="iconSize[size]" />
-            </slot>
-          </span>
-          <span v-if="tab.label" class="ui-tabs__label">{{ tab.label }}</span>
-          <span v-if="tab.counter > 0" class="ui-tabs__counter">{{ tab.counter }}</span>
-        </slot>
-      </div>
+      <slot name="label" :tab="tab">
+        <span v-if="tab.icon" class="ui-tabs__icon">
+          <slot name="icon" :tab="tab">
+            <component :is="tab.icon" :size="iconSize[size]" />
+          </slot>
+        </span>
+        <span v-if="tab.label" class="ui-tabs__label">{{ tab.label }}</span>
+        <span v-if="tab.counter > 0" class="ui-tabs__counter">{{ tab.counter }}</span>
+      </slot>
     </button>
   </div>
 </template>
@@ -41,7 +39,8 @@ export default {
   data() {
     return {
       iconSize: {
-        xs: 14,
+        mini: 14,
+        xs: 16,
         sm: 16,
         md: 16,
         lg: 20
@@ -62,7 +61,7 @@ export default {
       type: String,
       default: 'sm',
       validator: function (v) {
-        return ['xs', 'sm', 'md', 'lg'].includes(v)
+        return ['mini', 'xs', 'sm', 'md', 'lg'].includes(v)
       }
     },
     stretchItems: {

package/src/components/tabs/tabs.css

@@ -7,14 +7,24 @@
   box-sizing: border-box;
 }
 
+.ui-tabs--mini {
+  padding: var(--spacing-3xs);
+  border-radius: var(--rounded-lg);
+}
+
 .ui-tabs--xs {
-  padding: 2px;
+  border-radius: var(--radius);
+}
+
+.ui-tabs--xs,
+.ui-tabs--sm {
+  padding: 3px;
 }
 .ui-tabs--md {
-  padding: 4px;
+  padding: var(--spacing-2xs);
 }
 .ui-tabs--lg {
-  padding: 4px;
+  padding: var(--spacing-2xs);
 }
 
 /* — tab item — */
@@ -35,24 +45,14 @@
   white-space: nowrap;
   user-select: none;
   outline: none;
-  box-sizing: border-box;
   flex-shrink: 0;
-  transition: color 0.1s;
+  font-weight: 500;
 }
 
 .ui-tabs__item--stretch {
   flex: 1;
 }
 
-.ui-tabs__item-inner {
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 var(--spacing-xs);
-}
-
 .ui-tabs__item:hover:not(.ui-tabs__item--active):not(.ui-tabs__item--disabled) {
   color: var(--primary-fg);
 }
@@ -78,51 +78,66 @@
 }
 
 /* — sizes — */
-.ui-tabs--xs .ui-tabs__item {
+.ui-tabs--mini .ui-tabs__item {
   height: 20px;
-  padding: 0 6px;
+  min-width: 20px;
+  gap: var(--spacing-2xs);
+  padding: 0 var(--spacing-6);
+  border-radius: var(--rounded-md);
+}
+
+.ui-tabs--xs .ui-tabs__item {
+  height: 22px;
+  min-width: 29px;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  gap: 6px;
+  border-radius: var(--rounded-lg);
+}
+
+.ui-tabs--mini .ui-tabs__item,
+.ui-tabs--xs .ui-tabs__item {
   font-size: var(--paragraph-mini-font-size);
-  line-height: var(--paragraph-mini-line-height);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--paragraph-mini-line-height); /* 133.333% */
+  letter-spacing: var(--paragraph-mini-letter-spacing, 0);
 }
 
 .ui-tabs--md .ui-tabs__item {
-  height: 28px;
+  min-width: 32px;
+  padding: var(--spacing-2xs) var(--spacing-9);
+  gap: var(--spacing-xs);
+}
+
+.ui-tabs--sm .ui-tabs__item {
+  min-width: 29px;
+  height: 26px;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  gap: 6px;
 }
 
 .ui-tabs--lg .ui-tabs__item {
-  height: 32px;
-  padding: 0 var(--spacing-10);
+  padding: var(--spacing-5p5) var(--spacing-10);
+  gap: var(--spacing-xs);
+}
+
+.ui-tabs--sm .ui-tabs__item,
+.ui-tabs--md .ui-tabs__item,
+.ui-tabs--lg .ui-tabs__item {
+  font-size: var(--paragraph-small-font-size, 14px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--paragraph-small-line-height, 20px); /* 142.857% */
+  letter-spacing: var(--paragraph-small-letter-spacing, 0);
+  border-radius: var(--radius);
 }
 
-/* — icon + label elements — */
+/* Icons */
 .ui-tabs__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
   flex-shrink: 0;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.ui-tabs--lg .ui-tabs__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.ui-tabs--sm .ui-tabs__icon,
-.ui-tabs--md .ui-tabs__icon {
-  width: 16px;
-  height: 16px;
-}
-
-.ui-tabs--xs .ui-tabs__icon {
-  width: 14px;
-  height: 14px;
 }
 
 .ui-tabs__label {

package/src/icons/index.js

@@ -1773,5 +1773,6 @@ export { default as WkiSkewHeight } from './SkewHeight.vue'
 export { default as WkiSkewWidth } from './SkewWidth.vue'
 export { default as WkiStrokeLine } from './StrokeLine.vue'
 export { default as WkiTopline } from './Topline.vue'
+export { default as WkiLettersSpacing } from './LettersSpacing.vue'
 
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/styles/chart_colors.css

@@ -6,13 +6,13 @@
   --chart-4: #ffb900;
   --chart-5: #fe9a00;
 
-  --positive: #009689;
-  --negative: #f54a00;
+  --chart-positive: #009689;
+  --chart-negative: #f54a00;
 
   --fill: #bfdeffb3;
-  --stroke: #8ec5ff;
+  --chart-stroke: #8ec5ff;
   --fill-2: #aaccffb3;
-  --stroke-2: #3f8dff;
+  --chart-stroke-2: #3f8dff;
 }
 
 .dark {
@@ -23,11 +23,11 @@
   --chart-4: #ad46ff;
   --chart-5: #ff2056;
 
-  --positive: #00bc7d;
-  --negative: #ff2056;
+  --chart-positive: #00bc7d;
+  --chart-negative: #ff2056;
 
   --fill: #475d75b3;
-  --stroke: #8ec5ff;
+  --chart-stroke: #8ec5ff;
   --fill-2: #1f4176b3;
-  --stroke-2: #3f8dff;
+  --chart-stroke-2: #3f8dff;
 }

package/src/styles/color_general.css

@@ -120,6 +120,18 @@
   /* Effect */
   --focus-ring: var(--color-neutral-200);
   --focus-ring-error: var(--color-red-300);
+
+  /* Builder */
+  --layer-fg: var(--color-brand-neutrals-700);
+  --layer-hover-bg: var(--color-brand-neutrals-50);
+  --layer-accent-bg: var(--color-brand-neutrals-200);
+  --non-delete-layer-hover: var(--color-violet-50);
+  --non-delete-layer-accent: var(--color-violet-200);
+
+  --stroke: #3f8dff;
+  --stroke-hover: #8fbcff;
+  --non-delete-stroke: var(--color-violet-600);
+  --non-delete-stroke-hover: var(--color-violet-400);
 }
 
 .dark {