webcake-ui-kit 1.1.36 → 1.1.38

package/package.json

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

package/src/components/date-picker/DatePicker.vue

@@ -1,6 +1,5 @@
 <template>
   <Menu
-    class="ui-date-picker"
     :open="isOpen"
     :placement="placement"
     :offset="6"
@@ -14,8 +13,13 @@
     <template #trigger="{ triggerRef, attrs }">
       <div
         :ref="triggerRef"
-        class="ui-date-picker__trigger"
-        :class="[`ui-date-picker__trigger--${size}`, disabled && 'is-disabled', isOpen && 'is-focus']"
+        :class="[
+          'ui-date-picker',
+          'ui-date-picker__trigger',
+          `ui-date-picker__trigger--${size}`,
+          disabled && 'is-disabled',
+          isOpen && 'is-focus'
+        ]"
         v-bind="attrs"
         :tabindex="disabled ? -1 : 0"
         role="combobox"
@@ -76,6 +80,7 @@
       :today-text="todayText"
       :clear-text="clearText"
       :confirm-text="confirmText"
+      :show-year-jump="showYearJump"
       @prev="shiftMonth(-1)"
       @next="shiftMonth(1)"
       @prev-year="shiftYear(-1)"
@@ -127,16 +132,7 @@
  */
 import Menu from '../menu/Menu.vue'
 import CalendarPanel from './CalendarPanel.vue'
-import dayjs from 'dayjs'
-import * as _customParseFormat from 'dayjs/plugin/customParseFormat'
-import * as _localeData from 'dayjs/plugin/localeData'
-import * as _isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
-import * as _isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
-
-dayjs.extend(_customParseFormat.default || _customParseFormat)
-dayjs.extend(_localeData.default || _localeData)
-dayjs.extend(_isSameOrBefore.default || _isSameOrBefore)
-dayjs.extend(_isSameOrAfter.default || _isSameOrAfter)
+import dayjs from './dayjs.js'
 import { ISO, toDayjs, toISO, isDateDisabled, weekdayLabels, buildDayMatrix, orderISO } from './calendar.js'
 import { WkiCalendar, WkiX } from '../../icons'
 
@@ -190,7 +186,8 @@ export default {
     },
     todayText: { type: String, default: 'Today' },
     clearText: { type: String, default: 'Clear' },
-    confirmText: { type: String, default: 'OK' }
+    confirmText: { type: String, default: 'OK' },
+    showYearJump: { type: Boolean, default: true }
   },
   emits: [
     'change',

package/src/components/date-picker/PanelHeader.vue

@@ -17,6 +17,7 @@
             size="xs"
             :value="String(panel.month)"
             :options="monthOptions"
+            :dropdown-match-select-width="false"
             @change="m => $emit('set-month', { index: i, month: Number(m) })"
           />
         </span>

package/src/components/date-picker/calendar-panel.css

@@ -17,6 +17,7 @@
 .ui-cal-panel__body {
   display: flex;
   gap: var(--spacing-lg);
+  justify-content: center;
 }
 
 /* Months sit side by side; each grid is 7×36px wide. */

package/src/components/date-picker/calendar.js

@@ -6,12 +6,7 @@
 // its selection as ISO strings internally (stable identity, no deep-reactive
 // Day.js objects in `data`) and only converts to Date/formatted output at the
 // component boundary.
-import dayjs from 'dayjs'
-import * as _customParseFormat from 'dayjs/plugin/customParseFormat'
-import * as _localeData from 'dayjs/plugin/localeData'
-
-dayjs.extend(_customParseFormat.default || _customParseFormat)
-dayjs.extend(_localeData.default || _localeData)
+import dayjs from './dayjs.js'
 
 export const ISO = 'YYYY-MM-DD'
 

package/src/components/date-picker/dayjs.js

@@ -0,0 +1,28 @@
+import dayjs from 'dayjs'
+import * as _customParseFormat from 'dayjs/plugin/customParseFormat'
+import * as _localeData from 'dayjs/plugin/localeData'
+import * as _weekday from 'dayjs/plugin/weekday'
+import * as _weekOfYear from 'dayjs/plugin/weekOfYear'
+import * as _isoWeek from 'dayjs/plugin/isoWeek'
+import * as _advancedFormat from 'dayjs/plugin/advancedFormat'
+import * as _isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import * as _isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import * as _quarterOfYear from 'dayjs/plugin/quarterOfYear'
+
+function resolvePlugin(mod, globalName) {
+  if (typeof mod === 'function') return mod
+  if (mod && typeof mod.default === 'function') return mod.default
+  return (typeof globalThis !== 'undefined' && globalThis[globalName]) || mod
+}
+
+dayjs.extend(resolvePlugin(_customParseFormat, 'dayjs_plugin_customParseFormat'))
+dayjs.extend(resolvePlugin(_localeData, 'dayjs_plugin_localeData'))
+dayjs.extend(resolvePlugin(_weekday, 'dayjs_plugin_weekday'))
+dayjs.extend(resolvePlugin(_weekOfYear, 'dayjs_plugin_weekOfYear'))
+dayjs.extend(resolvePlugin(_isoWeek, 'dayjs_plugin_isoWeek'))
+dayjs.extend(resolvePlugin(_advancedFormat, 'dayjs_plugin_advancedFormat'))
+dayjs.extend(resolvePlugin(_isSameOrBefore, 'dayjs_plugin_isSameOrBefore'))
+dayjs.extend(resolvePlugin(_isSameOrAfter, 'dayjs_plugin_isSameOrAfter'))
+dayjs.extend(resolvePlugin(_quarterOfYear, 'dayjs_plugin_quarterOfYear'))
+
+export default dayjs

package/src/components/input-number/input-number.css

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

package/src/components/select/Select.vue

@@ -4,7 +4,7 @@
     :disabled="disabled || loading"
     placement="bottom-start"
     :offset="4"
-    :anchor-width="true"
+    :anchor-width="dropdownMatchSelectWidth"
     :close-on-select="false"
     @change="onMenuChange"
     @close="onMenuClose"
@@ -195,7 +195,8 @@ export default {
       default: null
     },
     overlayClassName: { type: [String, Array, Object], default: null },
-    overlayStyle: { type: [Object, Array], default: null }
+    overlayStyle: { type: [Object, Array], default: null },
+    dropdownMatchSelectWidth: { type: Boolean, default: true }
   },
 
   emits: ['change', 'update:modelValue'],

package/src/components/tabs/Tabs.vue

@@ -18,7 +18,7 @@
         <slot name="label" :tab="tab">
           <span v-if="tab.icon" class="ui-tabs__icon">
             <slot name="icon" :tab="tab">
-              <component :is="tab.icon" />
+              <component :is="tab.icon" :size="iconSize[size]" />
             </slot>
           </span>
           <span v-if="tab.label" class="ui-tabs__label">{{ tab.label }}</span>
@@ -38,6 +38,17 @@ export default {
     event: 'input'
   },
 
+  data() {
+    return {
+      iconSize: {
+        xs: 14,
+        sm: 16,
+        md: 16,
+        lg: 20
+      }
+    }
+  },
+
   props: {
     value: { default: null },
     modelValue: { default: null },

package/src/components/tabs/tabs.css

@@ -109,9 +109,20 @@
   }
 }
 
+.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: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
 }
 
 .ui-tabs__label {

package/src/components/tooltip/Tooltip.vue

@@ -151,6 +151,11 @@ export default {
       const trigger = this.$refs.trigger
       const tip = this.$refs.tooltip
       if (!trigger || !tip) return
+      // On first open positionStyle is {} so the element has CSS position:relative
+      // inside the portal root (width:0). That makes inline-flex shrink to
+      // min-content width instead of maxWidth, giving wrong offsetWidth/offsetHeight.
+      // Force fixed here so the viewport is the containing block before we measure.
+      tip.style.position = 'fixed'
       const t = trigger.getBoundingClientRect()
       const tw = tip.offsetWidth
       const th = tip.offsetHeight

package/src/icons/DistanceBottom.vue

@@ -0,0 +1,30 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M3.875 15.125C3.875 15.7463 4.37868 16.25 5 16.25L19 16.25C19.6213 16.25 20.125 15.7463 20.125 15.125V5C20.125 4.37868 19.6213 3.875 19 3.875L5 3.875C4.37868 3.875 3.875 4.37868 3.875 5L3.875 15.125ZM2.125 5C2.125 3.41218 3.41218 2.125 5 2.125L19 2.125C20.5878 2.125 21.875 3.41218 21.875 5V15.125C21.875 16.7128 20.5878 18 19 18L5 18C3.41218 18 2.125 16.7128 2.125 15.125L2.125 5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.125 21C2.125 21.4832 2.51675 21.875 3 21.875H21C21.4832 21.875 21.875 21.4832 21.875 21C21.875 20.5168 21.4832 20.125 21 20.125H3C2.51675 20.125 2.125 20.5168 2.125 21Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'DistanceBottom',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/DistanceLeft.vue

@@ -0,0 +1,30 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M8.875 3.875C8.25368 3.875 7.75 4.37868 7.75 5L7.75 19C7.75 19.6213 8.25368 20.125 8.875 20.125H19C19.6213 20.125 20.125 19.6213 20.125 19L20.125 5C20.125 4.37868 19.6213 3.875 19 3.875L8.875 3.875ZM19 2.125C20.5878 2.125 21.875 3.41218 21.875 5L21.875 19C21.875 20.5878 20.5878 21.875 19 21.875H8.875C7.28718 21.875 6 20.5878 6 19L6 5C6 3.41218 7.28718 2.125 8.875 2.125L19 2.125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3 2.125C2.51675 2.125 2.125 2.51675 2.125 3L2.125 21C2.125 21.4832 2.51675 21.875 3 21.875C3.48325 21.875 3.875 21.4832 3.875 21L3.875 3C3.875 2.51675 3.48325 2.125 3 2.125Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'DistanceLeft',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/LettersSpacing.vue

@@ -0,0 +1,32 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M2.125 21V3C2.125 2.51675 2.51675 2.125 3 2.125C3.48325 2.125 3.875 2.51675 3.875 3V21C3.875 21.4832 3.48325 21.875 3 21.875C2.51675 21.875 2.125 21.4832 2.125 21ZM20.125 21V3C20.125 2.51675 20.5168 2.125 21 2.125C21.4832 2.125 21.875 2.51675 21.875 3V21C21.875 21.4832 21.4832 21.875 21 21.875C20.5168 21.875 20.125 21.4832 20.125 21Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.9621 6.13086C12.8403 6.07345 12.7105 6.03439 12.5773 6.01465L12.3762 6C12.1726 6 11.9719 6.04479 11.7892 6.13086L11.6135 6.23047C11.4442 6.34329 11.3026 6.49227 11.1984 6.66504L11.1066 6.8457L7.06756 16.5361C6.88175 16.9821 7.09232 17.4947 7.53827 17.6807C7.98432 17.8666 8.49687 17.655 8.6828 17.209L9.70819 14.748H15.0422L16.0676 17.209C16.2534 17.6551 16.766 17.8665 17.2121 17.6807C17.658 17.4947 17.8686 16.9821 17.6828 16.5361L13.6447 6.8457L13.5529 6.66504C13.4835 6.54995 13.3977 6.44564 13.298 6.35547L13.1379 6.23047L12.9621 6.13086ZM12.3752 8.34961L10.4377 12.998H14.3127L12.3752 8.34961Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'LettersSpacing',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/LineHeight.vue

@@ -0,0 +1,32 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M21 20.125C21.4832 20.125 21.875 20.5168 21.875 21C21.875 21.4832 21.4832 21.875 21 21.875H3C2.51675 21.875 2.125 21.4832 2.125 21C2.125 20.5168 2.51675 20.125 3 20.125H21ZM21 2.125C21.4832 2.125 21.875 2.51675 21.875 3C21.875 3.48325 21.4832 3.875 21 3.875H3C2.51675 3.875 2.125 3.48325 2.125 3C2.125 2.51675 2.51675 2.125 3 2.125H21Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.9621 6.13086C12.8403 6.07345 12.7105 6.03439 12.5773 6.01465L12.3762 6C12.1726 6 11.9719 6.04479 11.7892 6.13086L11.6135 6.23047C11.4442 6.34329 11.3026 6.49227 11.1984 6.66504L11.1066 6.8457L7.06756 16.5361C6.88175 16.9821 7.09232 17.4947 7.53827 17.6807C7.98432 17.8666 8.49687 17.655 8.6828 17.209L9.70819 14.748H15.0422L16.0676 17.209C16.2534 17.6551 16.766 17.8665 17.2121 17.6807C17.658 17.4947 17.8686 16.9821 17.6828 16.5361L13.6447 6.8457L13.5529 6.66504C13.4835 6.54995 13.3977 6.44564 13.298 6.35547L13.1379 6.23047L12.9621 6.13086ZM12.3752 8.34961L10.4377 12.998H14.3127L12.3752 8.34961Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'LineHeight',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/StrokeWeight.vue

@@ -0,0 +1,34 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M20.125 17C20.125 16.3787 19.6213 15.875 19 15.875H5C4.37868 15.875 3.875 16.3787 3.875 17V19C3.875 19.6213 4.37868 20.125 5 20.125H19C19.6213 20.125 20.125 19.6213 20.125 19V17ZM21.875 19C21.875 20.5878 20.5878 21.875 19 21.875H5C3.41218 21.875 2.125 20.5878 2.125 19V17C2.125 15.4122 3.41218 14.125 5 14.125H19C20.5878 14.125 21.875 15.4122 21.875 17V19Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.125 8.875C20.125 8.25368 19.6213 7.75 19 7.75H5C4.37868 7.75 3.875 8.25368 3.875 8.875C3.875 9.49632 4.37868 10 5 10H19C19.6213 10 20.125 9.49632 20.125 8.875ZM21.875 8.875C21.875 10.4628 20.5878 11.75 19 11.75H5C3.41218 11.75 2.125 10.4628 2.125 8.875C2.125 7.28718 3.41218 6 5 6H19C20.5878 6 21.875 7.28718 21.875 8.875Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.875 3C21.875 2.51675 21.4832 2.125 21 2.125H3C2.51675 2.125 2.125 2.51675 2.125 3C2.125 3.48325 2.51675 3.875 3 3.875H21C21.4832 3.875 21.875 3.48325 21.875 3Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'StrokeWidth',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1744,5 +1744,9 @@ export { default as WkiColumns3Add } from './Columns3Add.vue'
 export { default as WkiFrameCorners } from './FrameCorners.vue'
 export { default as WkiFrameCornersDash } from './FrameCornersDash.vue'
 export { default as WkiOpacity } from './Opacity.vue'
+export { default as WkiDistanceLeft } from './DistanceLeft.vue'
+export { default as WkiDistanceBottom } from './DistanceBottom.vue'
+export { default as WkiLineHeight } from './LineHeight.vue'
+export { default as WkiStrokeWeight } from './StrokeWeight.vue'
 
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---