webcake-ui-kit 1.1.28 → 1.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -27,6 +27,7 @@
     "./WkButtonGroup": "./src/components/button-group/ButtonGroup.vue",
     "./WkCheckbox": "./src/components/checkbox/Checkbox.vue",
     "./WkCheckboxGroup": "./src/components/checkbox-group/CheckboxGroup.vue",
+    "./WkDatePicker": "./src/components/date-picker/DatePicker.vue",
     "./WkDialog": "./src/components/dialog/Dialog.vue",
     "./WkDivider": "./src/components/divider/Divider.vue",
     "./WkDropdown": "./src/components/dropdown/Dropdown.vue",
@@ -37,6 +38,7 @@
     "./WkInputNumber": "./src/components/input-number/InputNumber.vue",
     "./WkMenu": "./src/components/menu/Menu.vue",
     "./WkPagination": "./src/components/pagination/Pagination.vue",
+    "./WkProgress": "./src/components/progress/Progress.vue",
     "./WkRadio": "./src/components/radio/Radio.vue",
     "./WkRadioGroup": "./src/components/radio-group/RadioGroup.vue",
     "./WkRichCheckboxGroup": "./src/components/rich-checkbox-group/RichCheckboxGroup.vue",
@@ -135,5 +137,8 @@
   "bugs": {
     "url": "https://github.com/pancake-vn/webcake-ui-kit/issues"
   },
-  "homepage": "https://ui.webcake.io"
+  "homepage": "https://ui.webcake.io",
+  "dependencies": {
+    "dayjs": "^1.11.21"
+  }
 }

package/src/components/alert/Alert.vue

@@ -29,7 +29,8 @@ const ICON_BY_TYPE = {
   neutral: 'WkiCircleCheck',
   error: 'WkiCircleAlert',
   warning: 'WkiTriangleAlert',
-  info: 'WkiInfo'
+  info: 'WkiInfo',
+  success: 'WkiCircleCheck'
 }
 
 export default {
@@ -40,7 +41,7 @@ export default {
       type: String,
       default: 'neutral',
       validator: function (v) {
-        return ['neutral', 'error', 'warning', 'info'].includes(v)
+        return ['neutral', 'error', 'warning', 'info', 'success'].includes(v)
       }
     },
     title: {

package/src/components/alert/alert.css

@@ -42,6 +42,7 @@
   letter-spacing: var(--paragraph-small-letter-spacing);
   font-weight: var(--paragraph-medium-font-weight);
   word-break: break-word;
+  color: var(--primary-fg);
 }
 
 .ui-alert__description {
@@ -69,7 +70,7 @@
   padding: 0;
   border: none;
   background: none;
-  color: inherit;
+  color: var(--primary-fg);
   cursor: pointer;
   border-radius: var(--rounded-md);
   outline: none;
@@ -95,6 +96,9 @@
 .ui-alert--neutral {
   background: var(--card);
   border-color: var(--border-primary);
+}
+
+.ui-alert--neutral .ui-alert__icon {
   color: var(--primary-fg);
 }
 
@@ -104,14 +108,36 @@
   color: var(--destructive-text);
 }
 
+.ui-alert--error .ui-alert__icon {
+  color: var(--destructive);
+}
+
 .ui-alert--warning {
   background: var(--warning-subtle);
   border-color: var(--warning-border-subtle);
-  color: var(--warning-text);
+  color: var(--warning);
+}
+
+.ui-alert--warning .ui-alert__icon {
+  color: var(--warning);
 }
 
 .ui-alert--info {
   background: var(--infor-subtle);
   border-color: var(--infor-border-subtle);
-  color: var(--infor-text);
+  color: var(--infor);
+}
+
+.ui-alert--info .ui-alert__icon {
+  color: var(--infor);
+}
+
+.ui-alert--success {
+  background: var(--positive-subtle);
+  border-color: var(--positive-border-subtle);
+  color: var(--positive);
+}
+
+.ui-alert--success .ui-alert__icon {
+  color: var(--positive);
 }

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

@@ -0,0 +1,154 @@
+<template>
+  <div class="ui-cal-panel" :class="{ 'ui-cal-panel--with-time': showTime }">
+    <div class="ui-cal-panel__main">
+      <slot name="header">
+        <PanelHeader
+          :panels="panels"
+          :month-options="monthOptions"
+          :year-options="yearOptions"
+          :show-select-month="showSelectMonth"
+          :show-select-year="showSelectYear"
+          :can-prev="canPrev"
+          :can-next="canNext"
+          :show-year-jump="showYearJump"
+          @prev="$emit('prev')"
+          @next="$emit('next')"
+          @prev-year="$emit('prev-year')"
+          @next-year="$emit('next-year')"
+          @set-month="p => $emit('set-month', p)"
+          @set-year="p => $emit('set-year', p)"
+          @label-click="p => $emit('label-click', p)"
+        />
+      </slot>
+
+      <div class="ui-cal-panel__body">
+        <div class="ui-cal-panel__months" @keydown="$emit('grid-keydown', $event)">
+          <CalendarView
+            v-for="(view, i) in views"
+            :key="i"
+            class="ui-cal-panel__month"
+            :matrix="view.matrix"
+            :weekdays="weekdays"
+            :mode="mode"
+            :selected="selected"
+            :range-start="rangeStart"
+            :range-end="rangeEnd"
+            :focus-iso="focusIso"
+            :clip-outside="views.length > 1"
+            @select="iso => $emit('select', iso)"
+            @hover="iso => $emit('hover', iso)"
+          >
+            <!-- Always forward; the fallback renders the day number when the
+                 consumer hasn't supplied a custom #cell slot (dual-compat: no
+                 $scopedSlots sniffing needed). -->
+            <template #cell="slotProps">
+              <slot name="cell" v-bind="slotProps">{{ slotProps.cell.day }}</slot>
+            </template>
+          </CalendarView>
+        </div>
+
+        <div v-if="showTime" class="ui-cal-panel__time">
+          <slot name="time">
+            <TimePanel
+              :value="timeValue"
+              :show-seconds="showSeconds"
+              :hour-step="hourStep"
+              :minute-step="minuteStep"
+              :second-step="secondStep"
+              :disabled-time="disabledTime"
+              @change="t => $emit('time-change', t)"
+            />
+          </slot>
+        </div>
+      </div>
+    </div>
+
+    <slot name="footer">
+      <PanelFooter
+        v-if="showFooter"
+        :show-today="showToday"
+        :show-clear="showClear"
+        :show-confirm="showConfirm"
+        :today-disabled="todayDisabled"
+        :confirm-disabled="confirmDisabled"
+        :today-text="todayText"
+        :clear-text="clearText"
+        :confirm-text="confirmText"
+        @today="$emit('today')"
+        @clear="$emit('clear')"
+        @confirm="$emit('confirm')"
+      />
+    </slot>
+  </div>
+</template>
+
+<script>
+import CalendarView from './CalendarView.vue'
+import PanelHeader from './PanelHeader.vue'
+import PanelFooter from './PanelFooter.vue'
+import TimePanel from './TimePanel.vue'
+
+export default {
+  name: 'CalendarPanel',
+  components: { CalendarView, PanelHeader, PanelFooter, TimePanel },
+  props: {
+    // [{ matrix, monthLabel, month, year }] — one per visible month.
+    views: { type: Array, default: () => [] },
+    // Localized month names + selectable years for the header dropdowns.
+    monthOptions: { type: Array, default: () => [] },
+    yearOptions: { type: Array, default: () => [] },
+    showSelectMonth: { type: Boolean, default: false },
+    showSelectYear: { type: Boolean, default: false },
+    weekdays: { type: Array, default: () => [] },
+    mode: { type: String, default: 'single' },
+    selected: { type: Array, default: () => [] },
+    rangeStart: { type: String, default: null },
+    rangeEnd: { type: String, default: null },
+    focusIso: { type: String, default: null },
+    canPrev: { type: Boolean, default: true },
+    canNext: { type: Boolean, default: true },
+    showYearJump: { type: Boolean, default: false },
+    // Time
+    showTime: { type: Boolean, default: false },
+    timeValue: { type: Object, default: () => ({ hour: 0, minute: 0, second: 0 }) },
+    showSeconds: { type: Boolean, default: false },
+    hourStep: { type: Number, default: 1 },
+    minuteStep: { type: Number, default: 1 },
+    secondStep: { type: Number, default: 1 },
+    disabledTime: { type: Function, default: null },
+    // Footer
+    showFooter: { type: Boolean, default: true },
+    showToday: { type: Boolean, default: true },
+    showClear: { type: Boolean, default: true },
+    showConfirm: { type: Boolean, default: false },
+    todayDisabled: { type: Boolean, default: false },
+    confirmDisabled: { type: Boolean, default: false },
+    todayText: { type: String, default: 'Today' },
+    clearText: { type: String, default: 'Clear' },
+    confirmText: { type: String, default: 'OK' }
+  },
+  emits: [
+    'prev',
+    'next',
+    'prev-year',
+    'next-year',
+    'set-month',
+    'set-year',
+    'label-click',
+    'select',
+    'hover',
+    'grid-keydown',
+    'time-change',
+    'today',
+    'clear',
+    'confirm'
+  ],
+  computed: {
+    panels() {
+      return this.views.map(v => ({ month: v.month, year: v.year }))
+    }
+  }
+}
+</script>
+
+<style src="./calendar-panel.css" scoped></style>

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

@@ -0,0 +1,104 @@
+<template>
+  <div class="ui-cal-view">
+    <div class="ui-cal-view__weekdays" aria-hidden="true">
+      <span v-for="(w, i) in weekdays" :key="i" class="ui-cal-view__weekday">{{ w }}</span>
+    </div>
+    <div class="ui-cal-view__grid" role="grid" @mouseleave="$emit('hover', null)">
+      <button
+        v-for="cell in matrix"
+        :key="cell.iso"
+        type="button"
+        role="gridcell"
+        class="ui-cal-cell"
+        :class="cellClass(cell)"
+        :disabled="cell.disabled"
+        :tabindex="cell.iso === focusIso ? 0 : -1"
+        :aria-selected="isSelected(cell) ? 'true' : 'false'"
+        :aria-current="cell.today ? 'date' : null"
+        @click="onSelect(cell)"
+        @mouseenter="onHover(cell)"
+        @focus="onHover(cell)"
+      >
+        <span class="ui-cal-cell__inner">
+          <slot name="cell" :cell="cell">{{ cell.day }}</slot>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { rangePosition, isWithinRange } from './calendar.js'
+
+export default {
+  name: 'CalendarView',
+  props: {
+    // 42-cell array from buildDayMatrix().
+    matrix: { type: Array, default: () => [] },
+    // 7 weekday header labels, already rotated to weekStart.
+    weekdays: { type: Array, default: () => [] },
+    mode: { type: String, default: 'single' },
+    // Selected ISO keys (single => [iso], multiple => [...isos], range => []).
+    selected: { type: Array, default: () => [] },
+    // Resolved range endpoints (include live hover preview) for the band.
+    rangeStart: { type: String, default: null },
+    rangeEnd: { type: String, default: null },
+    // Roving keyboard focus target.
+    focusIso: { type: String, default: null },
+    // When true (multi-month view), suppress selection/range styling on days
+    // that belong to an adjacent month so each panel only paints its own days.
+    clipOutside: { type: Boolean, default: false }
+  },
+  emits: ['select', 'hover'],
+  methods: {
+    isSelected(cell) {
+      if (this.clipOutside && cell.outside) return false
+      if (this.mode === 'range') {
+        return cell.iso === this.rangeStart || cell.iso === this.rangeEnd
+      }
+      return this.selected.indexOf(cell.iso) !== -1
+    },
+    cellClass(cell) {
+      const cls = {
+        'is-outside': cell.outside,
+        'is-today': cell.today,
+        'is-weekend': cell.weekend,
+        'is-disabled': cell.disabled,
+        // The filled endpoint chip is clipped on outside days (via isSelected)
+        // so a shared date isn't drawn "active" in two panels at once...
+        'is-selected': this.isSelected(cell),
+        'is-focus': cell.iso === this.focusIso
+      }
+      if (this.mode === 'range') {
+        // ...but the connecting band (::before) DOES extend onto outside days so
+        // the range reads continuously to each panel's edge.
+        const pos = rangePosition(cell.iso, this.rangeStart, this.rangeEnd)
+        const clippedOutside = this.clipOutside && cell.outside
+        if (pos === 'middle') {
+          cls['is-in-range'] = true
+        } else if (pos === 'left' || pos === 'right') {
+          // A true endpoint (with chip) gets the rounded half end-cap; an outside
+          // endpoint has no chip, so give it a FULL band segment instead of a
+          // bare half-cell — otherwise the panel edge shows a broken 50% band.
+          if (clippedOutside) cls['is-in-range'] = true
+          else cls['is-range-' + pos] = true
+        } else if (pos === 'single' && !clippedOutside) {
+          cls['is-range-single'] = true
+        }
+        if (isWithinRange(cell.iso, this.rangeStart, this.rangeEnd)) cls['is-in-range'] = true
+      }
+      return cls
+    },
+    onSelect(cell) {
+      if (cell.disabled) return
+      this.$emit('select', cell.iso)
+    },
+    onHover(cell) {
+      if (cell.disabled) return
+      this.$emit('hover', cell.iso)
+    }
+  }
+}
+</script>
+
+<style src="./calendar-view.css" scoped></style>