webcake-ui-kit 1.1.29 → 1.1.31

package/src/components/message/message.js

@@ -0,0 +1,133 @@
+// Global message service — an Ant-Design-style singleton.
+//
+// Usage:
+//   import { wkMessage } from 'webcake-ui-kit'
+//   wkMessage.success('Saved')
+//   const hide = wkMessage.loading('Uploading...')  // sticky; call hide() to dismiss
+//   wkMessage.config({ placement: 'bottom', maxCount: 3, duration: 5000 })
+//
+// A single MessageContainer is lazily mounted to document.body the first time a
+// message is shown; consumers never render it themselves.
+//
+// Dual-compat note: the library ships raw SFCs consumed by both Vue 2.7 and
+// Vue 3.4. We namespace-import `vue` (which never errors on a missing member)
+// and branch at runtime to avoid static import errors in Vue 2.
+// eslint-disable-next-line no-restricted-imports
+import * as VueRuntime from 'vue'
+import MessageContainer from './MessageContainer.vue'
+
+const DEFAULTS = { duration: 3000, placement: 'top', offset: 24, maxCount: 0 }
+
+let globalConfig = { ...DEFAULTS }
+let app = null // Vue 3 application instance (needed for unmount)
+let containerVm = null // MessageContainer instance we drive imperatively
+let hostEl = null
+
+function ensureContainer() {
+  if (containerVm) return containerVm
+  if (typeof document === 'undefined') return null
+
+  hostEl = document.createElement('div')
+  hostEl.setAttribute('data-wk-message-host', '')
+  document.body.appendChild(hostEl)
+
+  // Bypass strict static analysis in bundlers (e.g. Webpack 5)
+  const createAppKey = 'createApp'
+  const defaultKey = 'default'
+
+  if (typeof VueRuntime[createAppKey] === 'function') {
+    app = VueRuntime[createAppKey](MessageContainer)
+    containerVm = app.mount(hostEl)
+  } else {
+    const Vue = VueRuntime[defaultKey] || VueRuntime
+    const vm = new Vue({
+      render: h => h(MessageContainer)
+    }).$mount(hostEl)
+    containerVm = vm.$children[0]
+  }
+
+  containerVm.configure(globalConfig)
+  return containerVm
+}
+
+// Accept either a config object, (content, optsObj), or (content, duration?, onClose?).
+function toConfig(content, durationOrOpts, onClose) {
+  const cfg = content && typeof content === 'object' ? { ...content } : { content }
+  if (durationOrOpts && typeof durationOrOpts === 'object') {
+    Object.assign(cfg, durationOrOpts)
+  } else if (typeof durationOrOpts === 'function') {
+    cfg.onClose = durationOrOpts
+  } else {
+    if (durationOrOpts !== undefined) cfg.duration = durationOrOpts
+    if (onClose !== undefined) cfg.onClose = onClose
+  }
+  return cfg
+}
+
+// Show a message. Returns a function that dismisses it early.
+function open(config) {
+  const vm = ensureContainer()
+  if (!vm) return function () {}
+
+  // Per-call placement/offset override (applied before add so the container
+  // is positioned correctly when the message enters).
+  if (config.placement != null || config.offset != null) {
+    vm.configure({
+      placement: config.placement,
+      offset: config.offset
+    })
+  }
+
+  const type = config.type || 'info'
+  const duration = config.duration !== undefined ? config.duration : type === 'loading' ? 0 : globalConfig.duration
+
+  const key = vm.add({
+    key: config.key,
+    type,
+    content: config.content,
+    description: config.description,
+    action: config.action,
+    duration,
+    onClose: config.onClose
+  })
+
+  return function close() {
+    vm.remove(key)
+  }
+}
+
+function makeOpener(type) {
+  return function (content, duration, onClose) {
+    const cfg = toConfig(content, duration, onClose)
+    cfg.type = type
+    return open(cfg)
+  }
+}
+
+export const wkMessage = {
+  open,
+  success: makeOpener('success'),
+  error: makeOpener('error'),
+  info: makeOpener('info'),
+  warning: makeOpener('warning'),
+  loading: makeOpener('loading'),
+  // destroy(key) removes one message; destroy() with no key removes all.
+  destroy(key) {
+    if (!containerVm) return
+    if (key === undefined) {
+      containerVm.clear()
+      return
+    }
+    containerVm.remove(key)
+  },
+  destroyAll() {
+    if (containerVm) containerVm.clear()
+  },
+  // Update global defaults (placement/offset/maxCount/duration). Applies live.
+  config(options) {
+    globalConfig = { ...globalConfig, ...options }
+    if (containerVm) containerVm.configure(globalConfig)
+  }
+}
+
+export default wkMessage

package/src/components/progress/Progress.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="ui-progress" role="progressbar" :aria-valuemin="0" :aria-valuemax="max" :aria-valuenow="clampedValue">
+    <div class="ui-progress__bar" :style="{ width: percent + '%' }" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Progress',
+
+  props: {
+    // Current progress value, clamped to the [0, max] range.
+    value: {
+      type: Number,
+      default: 0
+    },
+    // Upper bound of the progress scale (value === max renders a full bar).
+    max: {
+      type: Number,
+      default: 100,
+      validator: function (v) {
+        return v > 0
+      }
+    }
+  },
+
+  emits: [],
+
+  computed: {
+    clampedValue() {
+      if (this.value < 0) return 0
+      if (this.value > this.max) return this.max
+      return this.value
+    },
+    percent() {
+      return (this.clampedValue / this.max) * 100
+    }
+  }
+}
+</script>
+
+<style src="./progress.css" scoped></style>

package/src/components/progress/progress.css

@@ -0,0 +1,15 @@
+.ui-progress {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  overflow: hidden;
+  background: var(--accent-2);
+  border-radius: var(--rounded-xl);
+}
+
+.ui-progress__bar {
+  height: 100%;
+  background: var(--primary-fg);
+  border-radius: var(--rounded-md) 0 0 var(--rounded-md);
+  transition: width 0.2s ease;
+}

package/src/components/radio/Radio.vue

@@ -36,7 +36,7 @@ export default {
       default: ''
     },
     value: {
-      type: String,
+      type: [String, Number, Boolean],
       required: true
     },
     checked: {

package/src/components/radio-group/RadioGroup.vue

@@ -29,8 +29,8 @@ export default {
 
   props: {
     value: {
-      type: String,
-      default: ''
+      type: [String, Number, Boolean],
+      default: null
     },
     options: {
       type: Array,

package/src/components/table/Table.vue

@@ -113,12 +113,7 @@
               'ui-table__row',
               'ui-table__row--body',
               row._selected && 'ui-table__row--selected',
-              hasDrag && dragState && row._index === dragState.fromIndex && 'ui-table__row--dragging',
-              hasDrag &&
-                row._index === dragOverIndex &&
-                dragState &&
-                row._index !== dragState.fromIndex &&
-                'ui-table__row--drag-over'
+              hasDrag && dragState && row._index === dragState.currentIndex && 'ui-table__row--dragging'
             ]"
             :style="[{ height: toCssSize(rowHeight) }, rowScrollStyle]"
             v-bind="row._attrs"
@@ -263,7 +258,8 @@ export default {
       resizeState: null,
       columnWidths: {},
       dragState: null,
-      dragOverIndex: null
+      dragOverIndex: null,
+      internalData: this.dataSource.slice()
     }
   },
   computed: {
@@ -380,7 +376,7 @@ export default {
       return this.columns.length + (this.hasDrag ? 1 : 0) + (this.hasSelection ? 1 : 0)
     },
     rows() {
-      const data = this.dataSource.slice()
+      const data = this.internalData.slice()
       if (!this.sortField || !this.sortOrder) return data
       const col = this.normalizedColumns.find(c => c._field === this.sortField)
       if (!col || !col.sorter) return data
@@ -485,6 +481,11 @@ export default {
   watch: {
     selectedRowKeys(next) {
       this.internalSelected = (next || []).slice()
+    },
+    dataSource(next) {
+      if (!this.dragState) {
+        this.internalData = (next || []).slice()
+      }
     }
   },
   mounted() {
@@ -665,7 +666,7 @@ export default {
       this.emitSelection()
     },
     onDragStart(e, row) {
-      this.dragState = { fromIndex: row._index, record: row._record }
+      this.dragState = { fromIndex: row._index, currentIndex: row._index, record: row._record }
       e.dataTransfer.effectAllowed = 'move'
 
       const tr = e.currentTarget.closest('tr')
@@ -704,7 +705,20 @@ export default {
     },
     onDragOver(e, index) {
       if (!this.dragState) return
-      this.dragOverIndex = index
+      if (index === this.dragState.currentIndex) return
+      // Only reorder once the pointer crosses the row's midpoint to prevent oscillation.
+      const rect = e.currentTarget.getBoundingClientRect()
+      const midY = rect.top + rect.height / 1.5
+      if (index > this.dragState.currentIndex && e.clientY < midY) return
+      if (index < this.dragState.currentIndex && e.clientY > midY) return
+      // FLIP — snapshot "First" positions before the data changes.
+      const firstRects = this.snapshotRowRects()
+      const data = this.internalData.slice()
+      const [moved] = data.splice(this.dragState.currentIndex, 1)
+      data.splice(index, 0, moved)
+      this.internalData = data
+      this.dragState = { ...this.dragState, currentIndex: index }
+      this.$nextTick(() => this.flipAnimateRows(firstRects))
     },
     onDragLeave(e) {
       if (!e.currentTarget.contains(e.relatedTarget)) {
@@ -713,21 +727,16 @@ export default {
     },
     onDrop(e, toIndex) {
       if (!this.dragState) return
-      const { fromIndex, record } = this.dragState
-      if (fromIndex === toIndex) {
-        this.dragState = null
-        this.dragOverIndex = null
-        return
-      }
-      // FLIP — snapshot "First" positions before the data changes.
-      const firstRects = this.snapshotRowRects()
-      this.$emit('drag-record', { record, fromIndex, toIndex }, e)
+      const { fromIndex, record, currentIndex } = this.dragState
+      this.$emit('drag-record', { record, fromIndex, toIndex: currentIndex }, e)
       this.dragState = null
       this.dragOverIndex = null
-      // After Vue re-renders with the new order, run the Invert+Play phase.
-      this.$nextTick(() => this.flipAnimateRows(firstRects))
     },
     onDragEnd() {
+      if (this.dragState) {
+        // Drag cancelled (no drop) — revert live reorder.
+        this.internalData = this.dataSource.slice()
+      }
       this.dragState = null
       this.dragOverIndex = null
     },

package/src/components/table/table.css

@@ -161,6 +161,10 @@
   cursor: col-resize;
 }
 
+.ui-table__resize-handle:hover {
+  height: 100%;
+}
+
 .ui-table__resize-handle--left {
   right: auto;
   left: -4px;
@@ -179,8 +183,8 @@
 
 .ui-table__resize-handle:hover::before,
 .ui-table__resize-handle.resizing::before {
-  width: 2px;
-  background: var(--border-focus);
+  width: 3px;
+  background: #3f8dff;
 }
 
 .ui-table__th-inner {
@@ -275,6 +279,18 @@
   border-right: none;
 }
 
+@keyframes ui-table-sticky-border-hide {
+  to {
+    border-right-width: 0;
+  }
+}
+
+.ui-table--bordered .ui-table__cell--fixed-left-last {
+  animation: ui-table-sticky-border-hide linear both;
+  animation-timeline: scroll(nearest x);
+  animation-range: 0px 1px;
+}
+
 /* With a scrollbar spacer present, the last real header column is second-to-last. */
 .ui-table--bordered .ui-table__row--has-scrollbar .ui-table__cell:nth-last-child(2) {
   border-right: none;

package/src/index.js

@@ -20,6 +20,7 @@ export { default as WkInput } from './components/input/Input.vue'
 export { default as WkInputNumber } from './components/input-number/InputNumber.vue'
 export { default as WkMenu } from './components/menu/Menu.vue'
 export { default as WkPagination } from './components/pagination/Pagination.vue'
+export { default as WkProgress } from './components/progress/Progress.vue'
 export { default as WkRadio } from './components/radio/Radio.vue'
 export { default as WkRadioGroup } from './components/radio-group/RadioGroup.vue'
 export { default as WkRichCheckboxGroup } from './components/rich-checkbox-group/RichCheckboxGroup.vue'
@@ -40,3 +41,7 @@ export { default as WkToggle } from './components/toggle/Toggle.vue'
 export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
 export { default as WkTooltip } from './components/tooltip/Tooltip.vue'
 export { default as WkTypography } from './components/typography/Typography.vue'
+export { default as WkDatePicker } from './components/date-picker/DatePicker.vue'
+
+// Imperative singleton service (no SFC export — mounts its own container to body).
+export { wkMessage } from './components/message/message.js'