webcake-ui-kit 1.1.38 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.38",
+  "version": "1.2.1",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -30,14 +30,18 @@
     "./WkDatePicker": "./src/components/date-picker/DatePicker.vue",
     "./WkDialog": "./src/components/dialog/Dialog.vue",
     "./WkDivider": "./src/components/divider/Divider.vue",
+    "./WkDrawer": "./src/components/drawer/Drawer.vue",
     "./WkDropdown": "./src/components/dropdown/Dropdown.vue",
     "./WkEmpty": "./src/components/empty/Empty.vue",
     "./WkEmptyIcon": "./src/components/empty-icon/EmptyIcon.vue",
     "./WkField": "./src/components/field/Field.vue",
+    "./WkHoverCard": "./src/components/hover-card/HoverCard.vue",
     "./WkInput": "./src/components/input/Input.vue",
+    "./WkInputCounter": "./src/components/input-counter/InputCounter.vue",
     "./WkInputNumber": "./src/components/input-number/InputNumber.vue",
     "./WkMenu": "./src/components/menu/Menu.vue",
     "./WkPagination": "./src/components/pagination/Pagination.vue",
+    "./WkPopover": "./src/components/popover/Popover.vue",
     "./WkProgress": "./src/components/progress/Progress.vue",
     "./WkRadio": "./src/components/radio/Radio.vue",
     "./WkRadioGroup": "./src/components/radio-group/RadioGroup.vue",
@@ -52,6 +56,7 @@
     "./WkSwitch": "./src/components/switch/Switch.vue",
     "./WkSwitchGroup": "./src/components/switch-group/SwitchGroup.vue",
     "./WkTable": "./src/components/table/Table.vue",
+    "./WkTableV2": "./src/components/table-v2/Table.vue",
     "./WkTabs": "./src/components/tabs/Tabs.vue",
     "./WkTag": "./src/components/tag/Tag.vue",
     "./WkTextarea": "./src/components/textarea/Textarea.vue",
@@ -139,6 +144,7 @@
   },
   "homepage": "https://ui.webcake.io",
   "dependencies": {
-    "dayjs": "^1.11.21"
+    "dayjs": "^1.11.21",
+    "vuedraggable": "^2.24.3"
   }
 }

package/src/components/checkbox/Checkbox.vue

@@ -10,7 +10,7 @@
       @change="onChange"
     />
     <span class="ui-checkbox__box" aria-hidden="true">
-      <WkiCheck v-if="isChecked" :size="16" />
+      <WkiCheck v-if="isChecked" :size="14" />
     </span>
   </span>
 </template>

package/src/components/drawer/Drawer.vue

@@ -0,0 +1,261 @@
+<template>
+  <div v-if="hasOpened" v-show="isVisible" class="ui-drawer-root" :style="rootStyle">
+    <transition name="ui-drawer-fade">
+      <div v-if="isOpen && mask" class="ui-drawer-mask" :style="maskStyle" @click="onMaskClick"></div>
+    </transition>
+    <transition :name="transitionName" appear @after-leave="onAfterLeave">
+      <div
+        v-if="isOpen"
+        ref="panel"
+        :class="['ui-drawer', `ui-drawer--${placement}`]"
+        :style="panelStyle"
+        tabindex="-1"
+        role="dialog"
+        aria-modal="true"
+        @keydown.esc="onEscape"
+      >
+        <div
+          v-if="showHandle"
+          class="ui-drawer__handle"
+          aria-hidden="true"
+          @mousedown="onHandlePointerDown"
+          @touchstart="onHandlePointerDown"
+          style="cursor: grab"
+        >
+          <span class="ui-drawer__handle-bar"></span>
+        </div>
+        <div class="ui-drawer__body">
+          <slot></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { acquire, release } from '../../floating/portal-root.js'
+import { bumpTo, nextZIndex } from '../../floating/layer-manager.js'
+
+const PLACEMENTS = ['bottom', 'top', 'left', 'right']
+
+export default {
+  name: 'Drawer',
+  model: { prop: 'open', event: 'change' },
+  props: {
+    open: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    placement: {
+      type: String,
+      default: 'bottom',
+      validator: v => PLACEMENTS.includes(v)
+    },
+    // Cross-axis size: height for top/bottom, width for left/right.
+    size: { type: [Number, String], default: '' },
+    showHandle: { type: Boolean, default: true },
+    mask: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: true },
+    keyboard: { type: Boolean, default: true },
+    blur: { type: [Boolean, Number, String], default: false },
+    zIndex: { type: [Number, String], default: 1000 }
+  },
+  emits: ['change', 'update:modelValue', 'open', 'close', 'after-close'],
+  data() {
+    return {
+      hasOpened: false,
+      isVisible: false,
+      activeZIndex: 0,
+      isDragging: false,
+      dragSize: null
+    }
+  },
+  computed: {
+    isOpen() {
+      return this.modelValue !== undefined ? this.modelValue : this.open
+    },
+    isHorizontal() {
+      return this.placement === 'left' || this.placement === 'right'
+    },
+    transitionName() {
+      return `ui-drawer-slide-${this.placement}`
+    },
+    rootStyle() {
+      return { zIndex: this.activeZIndex || this.zIndex }
+    },
+    maskStyle() {
+      if (!this.blur) return {}
+      const val =
+        this.blur === true
+          ? '8px'
+          : typeof this.blur === 'number' || !isNaN(Number(this.blur))
+            ? `${this.blur}px`
+            : this.blur
+      return { backdropFilter: `blur(${val})`, WebkitBackdropFilter: `blur(${val})` }
+    },
+    panelStyle() {
+      if (this.dragSize !== null) {
+        const v = `${this.dragSize}px`
+        return Object.assign({}, this.isHorizontal ? { width: v } : { height: v }, { transition: 'none' })
+      }
+      if (this.size === '' || this.size === null) return {}
+      const v = typeof this.size === 'number' || !isNaN(Number(this.size)) ? `${this.size}px` : this.size
+      return this.isHorizontal ? { width: v } : { height: v }
+    }
+  },
+  watch: {
+    isOpen: {
+      handler(v) {
+        if (v) {
+          this.isVisible = true
+          this.onOpen()
+        } else {
+          this.onClose()
+        }
+      }
+    }
+  },
+  mounted() {
+    this._prevFocus = null
+    this._prevOverflow = ''
+    this._prevPadding = ''
+    if (typeof document !== 'undefined' && this.$el) {
+      this._drawerPortalRoot = acquire()
+      if (this._drawerPortalRoot) this._drawerPortalRoot.appendChild(this.$el)
+    }
+    if (typeof this.$on === 'function') {
+      // eslint-disable-next-line vue/no-deprecated-events-api
+      this.$on('hook:beforeDestroy', this.cleanup)
+    }
+    if (this.isOpen) {
+      this.isVisible = true
+      this.onOpen()
+    }
+  },
+  beforeUnmount() {
+    this.cleanup()
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this.cleanup()
+  },
+  methods: {
+    setOpen(v) {
+      this.$emit('change', v)
+      this.$emit('update:modelValue', v)
+    },
+    close() {
+      this.setOpen(false)
+    },
+    onMaskClick(e) {
+      if (this.maskClosable) this.close(e)
+    },
+    onHandlePointerDown(e) {
+      if (!this.$refs.panel) return
+      this.isDragging = true
+      const rect = this.$refs.panel.getBoundingClientRect()
+      this._initialSize = this.isHorizontal ? rect.width : rect.height
+      this._startClientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
+      this._startClientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
+      this.dragSize = this._initialSize
+
+      document.addEventListener('mousemove', this.onPointerMove)
+      document.addEventListener('touchmove', this.onPointerMove, { passive: false })
+      document.addEventListener('mouseup', this.onPointerUp)
+      document.addEventListener('touchend', this.onPointerUp)
+    },
+    onPointerMove(e) {
+      if (!this.isDragging) return
+      e.preventDefault()
+
+      const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
+      const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
+
+      let delta = 0
+      if (this.placement === 'bottom') {
+        delta = this._startClientY - clientY
+      } else if (this.placement === 'top') {
+        delta = clientY - this._startClientY
+      } else if (this.placement === 'right') {
+        delta = this._startClientX - clientX
+      } else if (this.placement === 'left') {
+        delta = clientX - this._startClientX
+      }
+
+      this.dragSize = Math.max(0, Math.min(this._initialSize, this._initialSize + delta))
+    },
+    onPointerUp() {
+      if (!this.isDragging) return
+      this.isDragging = false
+
+      document.removeEventListener('mousemove', this.onPointerMove)
+      document.removeEventListener('touchmove', this.onPointerMove)
+      document.removeEventListener('mouseup', this.onPointerUp)
+      document.removeEventListener('touchend', this.onPointerUp)
+
+      if (this.dragSize < this._initialSize * (2 / 3)) {
+        this.close()
+      }
+
+      this.dragSize = null
+    },
+    onEscape(e) {
+      if (this.keyboard) this.close(e)
+    },
+    onOpen() {
+      this.hasOpened = true
+      bumpTo(this.zIndex)
+      this.activeZIndex = nextZIndex()
+      this.lockBody()
+      if (typeof document !== 'undefined') {
+        this._prevFocus = document.activeElement
+      }
+      this.$emit('open')
+      this.$nextTick(() => {
+        if (this.$refs.panel && this.$refs.panel.focus) {
+          this.$refs.panel.focus()
+        }
+      })
+    },
+    onClose() {
+      this.unlockBody()
+      if (this._prevFocus && typeof this._prevFocus.focus === 'function') {
+        this._prevFocus.focus()
+      }
+      this._prevFocus = null
+      this.$emit('close')
+    },
+    onAfterLeave() {
+      if (!this.isOpen) {
+        this.isVisible = false
+      }
+      this.$emit('after-close')
+    },
+    lockBody() {
+      if (typeof document === 'undefined' || typeof window === 'undefined') return
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+      this._prevOverflow = document.body.style.overflow
+      this._prevPadding = document.body.style.paddingRight
+      document.body.style.overflow = 'hidden'
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`
+      }
+    },
+    unlockBody() {
+      if (typeof document === 'undefined') return
+      document.body.style.overflow = this._prevOverflow || ''
+      document.body.style.paddingRight = this._prevPadding || ''
+    },
+    cleanup() {
+      this.unlockBody()
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      }
+      if (this._drawerPortalRoot) {
+        release()
+        this._drawerPortalRoot = null
+      }
+    }
+  }
+}
+</script>
+
+<style src="./drawer.css" scoped></style>

package/src/components/drawer/drawer.css

@@ -0,0 +1,162 @@
+/* ── overlay ──────────────────────────────────────────────────────────── */
+.ui-drawer-root {
+  position: fixed;
+  inset: 0;
+}
+
+.ui-drawer-mask {
+  position: absolute;
+  inset: 0;
+  background: var(--backdrop);
+}
+
+/* ── panel ────────────────────────────────────────────────────────────── */
+.ui-drawer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: var(--card);
+  box-shadow: var(--shadow-xl);
+  overflow: hidden;
+  outline: none;
+  pointer-events: auto;
+  box-sizing: border-box;
+  border-radius: var(--rounded-3xl);
+  margin: 8px;
+}
+
+/* Bottom sheet (default) — spans full width, docked to the bottom edge. */
+.ui-drawer--bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: calc(100% - var(--spacing-4xl));
+}
+
+.ui-drawer--top {
+  left: 0;
+  right: 0;
+  top: 0;
+  max-height: calc(100% - var(--spacing-4xl));
+}
+
+.ui-drawer--left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 378px;
+  max-width: calc(100% - var(--spacing-4xl));
+}
+
+.ui-drawer--right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 378px;
+  max-width: calc(100% - var(--spacing-4xl));
+}
+
+/* ── handle ───────────────────────────────────────────────────────────── */
+.ui-drawer__handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-sm);
+}
+
+.ui-drawer__handle-bar {
+  width: 50px;
+  height: 3px;
+  border-radius: var(--radius-2);
+  background: var(--accent-2);
+}
+
+/* Side drawers get a vertical grab bar aligned to the exposed edge. */
+.ui-drawer--left .ui-drawer__handle,
+.ui-drawer--right .ui-drawer__handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.ui-drawer--left .ui-drawer__handle {
+  right: 0;
+  padding-right: var(--spacing-xs);
+  padding-left: var(--spacing-sm);
+}
+
+.ui-drawer--right .ui-drawer__handle {
+  left: 0;
+  padding-left: var(--spacing-xs);
+  padding-right: var(--spacing-sm);
+}
+
+.ui-drawer--left .ui-drawer__handle-bar,
+.ui-drawer--right .ui-drawer__handle-bar {
+  width: 3px;
+  height: 50px;
+}
+
+/* ── body ─────────────────────────────────────────────────────────────── */
+.ui-drawer__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  font-family: var(--paragraph-small-font-family);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--secondary-fg);
+}
+
+/* ── transitions ──────────────────────────────────────────────────────── */
+.ui-drawer-fade-enter-active,
+.ui-drawer-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.ui-drawer-fade-enter,
+.ui-drawer-fade-enter-from,
+.ui-drawer-fade-leave-to {
+  opacity: 0;
+}
+
+.ui-drawer-slide-bottom-enter-active,
+.ui-drawer-slide-bottom-leave-active,
+.ui-drawer-slide-top-enter-active,
+.ui-drawer-slide-top-leave-active,
+.ui-drawer-slide-left-enter-active,
+.ui-drawer-slide-left-leave-active,
+.ui-drawer-slide-right-enter-active,
+.ui-drawer-slide-right-leave-active {
+  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.ui-drawer-slide-bottom-enter,
+.ui-drawer-slide-bottom-enter-from,
+.ui-drawer-slide-bottom-leave-to {
+  transform: translateY(100%);
+}
+
+.ui-drawer-slide-top-enter,
+.ui-drawer-slide-top-enter-from,
+.ui-drawer-slide-top-leave-to {
+  transform: translateY(-100%);
+}
+
+.ui-drawer-slide-left-enter,
+.ui-drawer-slide-left-enter-from,
+.ui-drawer-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+.ui-drawer-slide-right-enter,
+.ui-drawer-slide-right-enter-from,
+.ui-drawer-slide-right-leave-to {
+  transform: translateX(100%);
+}

package/src/components/dropdown/Dropdown.vue

@@ -24,15 +24,21 @@
         <slot></slot>
       </span>
     </template>
-    <DropdownMenuItems
-      v-if="hasItems"
-      :items="items"
-      :value="value"
-      @select="onItemSelect"
-      :size="size"
-      :showChecked="showChecked"
-    />
-    <slot v-else name="overlay"></slot>
+    <div
+      style="display: contents"
+      @mouseenter="triggerHasHover && handleMouseEnter()"
+      @mouseleave="triggerHasHover && handleMouseLeave()"
+    >
+      <DropdownMenuItems
+        v-if="hasItems"
+        :items="items"
+        :value="value"
+        @select="onItemSelect"
+        :size="size"
+        :showChecked="showChecked"
+      />
+      <slot v-else name="overlay"></slot>
+    </div>
   </Menu>
 </template>
 

package/src/components/hover-card/HoverCard.vue

@@ -0,0 +1,159 @@
+<template>
+  <Menu
+    :open="isOpen"
+    :placement="placement"
+    :offset="offset"
+    :auto-focus="false"
+    :persistent="!triggerHasClick"
+    :close-on-esc="closeOnEsc"
+    :disabled="disabled"
+    :anchor-width="anchorWidth"
+    :width="width"
+    :overlay-class-name="overlayClassName"
+    :overlay-style="overlayStyle"
+    @change="onOpenChange"
+    @open="$emit('open')"
+    @close="$emit('close')"
+  >
+    <template #trigger="{ triggerRef }">
+      <span
+        :ref="triggerRef"
+        class="ui-hover-card__anchor"
+        @click="triggerHasClick && toggleClick()"
+        @mouseenter="triggerHasHover && onOpenIntent()"
+        @mouseleave="triggerHasHover && onCloseIntent()"
+        @focusin="onOpenIntent()"
+        @focusout="onCloseIntent()"
+      >
+        <slot name="trigger"></slot>
+      </span>
+    </template>
+    <div
+      class="ui-hover-card__panel"
+      @mouseenter="triggerHasHover && onOpenIntent()"
+      @mouseleave="triggerHasHover && onCloseIntent()"
+    >
+      <slot></slot>
+    </div>
+  </Menu>
+</template>
+
+<script>
+import Menu from '../menu/Menu.vue'
+
+const PLACEMENTS = [
+  'top',
+  'top-start',
+  'top-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+  'right',
+  'right-start',
+  'right-end'
+]
+
+export default {
+  name: 'HoverCard',
+  components: { Menu },
+  model: { prop: 'open', event: 'change' },
+  props: {
+    open: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    placement: {
+      type: String,
+      default: 'bottom',
+      validator: v => PLACEMENTS.indexOf(v) !== -1
+    },
+    offset: { type: Number, default: 8 },
+    // 'hover', 'click', or both
+    trigger: {
+      type: Array,
+      default: function () {
+        return ['hover']
+      }
+    },
+    openDelay: { type: Number, default: 200 },
+    closeDelay: { type: Number, default: 150 },
+    closeOnEsc: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    anchorWidth: { type: Boolean, default: false },
+    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'],
+  data() {
+    return {
+      isOpen: this.modelValue !== undefined ? this.modelValue : this.open
+    }
+  },
+  computed: {
+    triggerHasClick() {
+      return this.trigger.indexOf('click') !== -1
+    },
+    triggerHasHover() {
+      return this.trigger.indexOf('hover') !== -1
+    }
+  },
+  watch: {
+    open(v) {
+      if (this.modelValue === undefined) this.isOpen = v
+    },
+    modelValue(v) {
+      if (v !== undefined) this.isOpen = v
+    }
+  },
+  methods: {
+    onOpenChange(v) {
+      this.isOpen = v
+      this.$emit('change', v)
+      this.$emit('update:modelValue', v)
+    },
+    _clearTimers() {
+      if (this._openTimer) {
+        clearTimeout(this._openTimer)
+        this._openTimer = null
+      }
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer)
+        this._closeTimer = null
+      }
+    },
+    toggleClick() {
+      if (this.disabled) return
+      this._clearTimers()
+      this.onOpenChange(!this.isOpen)
+    },
+    onOpenIntent() {
+      if (this.disabled) return
+      this._clearTimers()
+      if (this.isOpen) return
+      this._openTimer = setTimeout(() => {
+        this._openTimer = null
+        this.onOpenChange(true)
+      }, this.openDelay)
+    },
+    onCloseIntent() {
+      this._clearTimers()
+      if (!this.isOpen) return
+      this._closeTimer = setTimeout(() => {
+        this._closeTimer = null
+        this.onOpenChange(false)
+      }, this.closeDelay)
+    }
+  },
+  beforeUnmount() {
+    this._clearTimers()
+  },
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    this._clearTimers()
+  }
+}
+</script>
+
+<style src="./hover-card.css" scoped></style>

package/src/components/hover-card/hover-card.css

@@ -0,0 +1,10 @@
+.ui-hover-card__anchor {
+  display: inline-flex;
+}
+
+.ui-hover-card__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+}