webcake-ui-kit 1.1.33 → 1.1.35

package/package.json

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

package/src/components/alert-dialog/AlertDialog.vue

@@ -25,10 +25,21 @@
     </div>
     <template #footer>
       <slot name="footer">
-        <Button :variant="cancelVariant" class="ui-alert-dialog-btn" @click="handleCancel">{{ cancelText }}</Button>
-        <Button :variant="okVariant" :loading="confirmLoading" class="ui-alert-dialog-btn" @click="handleOk">{{
-          okText
-        }}</Button>
+        <Button
+          size="sm"
+          :variant="cancelVariant"
+          class="ui-alert-dialog-btn"
+          @click="handleCancel"
+          :label="cancelText"
+        />
+        <Button
+          size="sm"
+          :variant="okVariant"
+          :loading="confirmLoading"
+          class="ui-alert-dialog-btn"
+          @click="handleOk"
+          :label="okText"
+        />
       </slot>
     </template>
   </Dialog>

package/src/components/badge/badge.css

@@ -11,6 +11,8 @@
   font-weight: var(--paragraph-bold-font-weight);
   white-space: nowrap;
   transition: box-shadow 0.15s ease;
+  border-width: 1px;
+  border-style: solid;
 }
 
 .ui-badge--round-default {
@@ -21,35 +23,39 @@
 }
 
 .ui-badge--primary {
-  background: var(--primary-brand-bg);
-  color: var(--inverse-fg);
+  background: var(--positive-subtle);
+  color: var(--primary-brand-fg);
+  border-color: var(--positive-border-subtle);
 }
 .ui-badge--secondary {
   background: var(--secondary-bg);
   color: var(--secondary-fg);
+  border: none;
 }
 .ui-badge--outline {
   background: var(--outline);
   color: var(--primary-fg);
-  border-width: 1px;
-  border-style: solid;
   border-color: var(--border-primary);
 }
 .ui-badge--ghost {
   background: var(--ghost);
   color: var(--primary-fg);
+  border: none;
 }
 .ui-badge--destructive {
-  background: var(--destructive);
-  color: var(--destructive-inverse-fg);
+  background: var(--destructive-subtle);
+  color: var(--destructive);
+  border-color: var(--destructive-border-subtle);
 }
 .ui-badge--info {
-  background: var(--blue-500);
-  color: var(--inverse-fg);
+  background: var(--infor-subtle);
+  color: var(--infor);
+  border-color: var(--infor-border-subtle);
 }
 .ui-badge--warning {
-  background: var(--yellow-500);
-  color: var(--inverse-fg);
+  background: var(--warning-subtle);
+  color: var(--warning);
+  border-color: var(--warning-border-subtle);
 }
 
 .ui-badge:focus-visible {

package/src/components/button/Button.vue

@@ -48,7 +48,8 @@ export default {
     variant: {
       type: String,
       default: 'primary',
-      validator: v => ['primary', 'neutral', 'secondary', 'outline', 'ghost', 'destructive', 'link'].includes(v)
+      validator: v =>
+        ['primary', 'neutral', 'secondary', 'outline', 'ghost', 'destructive', 'link', 'ghost-destructive'].includes(v)
     },
     size: {
       type: String,

package/src/components/button/button.css

@@ -9,6 +9,7 @@
   cursor: pointer;
   font-family: var(--font-family-body);
   font-weight: var(--paragraph-medium-font-weight);
+  justify-content: center;
   text-align: center;
   white-space: nowrap;
   transition:
@@ -20,7 +21,6 @@
 
 .ui-btn__label {
   display: inline-flex;
-  flex: 1;
 }
 
 .ui-btn__icon {
@@ -218,6 +218,17 @@
   background: var(--destructive-hover);
 }
 
+/* ghost-destructive */
+.ui-btn--ghost-destructive {
+  background: var(--ghost);
+  color: var(--destructive);
+}
+
+.ui-btn--ghost-destructive:hover,
+.ui-btn--ghost-destructive:active {
+  background: var(--destructive-subtle);
+}
+
 /* Link — text-only button on transparent ghost bg, brand-colored. */
 .ui-btn--link {
   background: var(--ghost);
@@ -252,7 +263,8 @@
   border-color: var(--border-focus);
 }
 
-.ui-btn--destructive:focus-visible {
+.ui-btn--destructive:focus-visible,
+.ui-btn--ghost-destructive:focus-visible {
   box-shadow: 0 0 0 3px var(--focus-ring-error);
 }
 
@@ -265,6 +277,13 @@
   pointer-events: none;
 }
 
+.ui-btn:not(.ui-btn--ghost):not(.ui-btn--link):disabled {
+  background: var(--muted-bg);
+  color: var(--muted-fg);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
+}
+
 /* ============================================================
    Icon-only — square button, uniform padding per size.
    Width = height; default slot content rendered in .ui-btn__icon

package/src/components/button-group/button-group.css

@@ -31,3 +31,7 @@
   position: relative;
   z-index: 1;
 }
+
+.ui-button-group .ui-btn--outline:disabled {
+  background: var(--secondary-hover) !important;
+}

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

@@ -127,7 +127,16 @@
  */
 import Menu from '../menu/Menu.vue'
 import CalendarPanel from './CalendarPanel.vue'
-import dayjs from './dayjs.js'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import localeData from 'dayjs/plugin/localeData'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+
+dayjs.extend(customParseFormat)
+dayjs.extend(localeData)
+dayjs.extend(isSameOrBefore)
+dayjs.extend(isSameOrAfter)
 import { ISO, toDayjs, toISO, isDateDisabled, weekdayLabels, buildDayMatrix, orderISO } from './calendar.js'
 import { WkiCalendar, WkiX } from '../../icons'
 

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

@@ -6,7 +6,12 @@
 // 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.js'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import localeData from 'dayjs/plugin/localeData'
+
+dayjs.extend(customParseFormat)
+dayjs.extend(localeData)
 
 export const ISO = 'YYYY-MM-DD'
 

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

@@ -1,7 +1,7 @@
 .ui-time-panel {
   display: flex;
   gap: var(--spacing-3xs);
-  height: 200px;
+  height: 220px;
   font-family: var(--font-family-body);
 }
 

package/src/components/dialog/Dialog.vue

@@ -81,8 +81,10 @@
             >
               <div class="ui-dialog-footer__inner">
                 <slot name="footer">
-                  <Button :variant="cancelVariant" @click="handleCancel">{{ cancelText }}</Button>
-                  <Button :variant="okVariant" :loading="confirmLoading" @click="handleOk">{{ okText }}</Button>
+                  <Button size="sm" :variant="cancelVariant" @click="handleCancel">{{ cancelText }}</Button>
+                  <Button size="sm" :variant="okVariant" :loading="confirmLoading" @click="handleOk">{{
+                    okText
+                  }}</Button>
                 </slot>
               </div>
             </div>

package/src/components/input/input.css

@@ -95,6 +95,7 @@
 /* Disabled — visual only; cursor handled by inner field. */
 .ui-input--disabled {
   opacity: 0.5;
+  background: var(--secondary-bg);
 }
 
 .ui-input--disabled:focus-within {

package/src/components/menu/menu.css

@@ -19,7 +19,6 @@
   box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
-  min-width: 176px;
   outline: none;
   pointer-events: auto;
   box-sizing: border-box;

package/src/components/message/Message.vue

@@ -1,25 +1,40 @@
 <template>
   <div class="ui-message" :class="`ui-message--${type}`" role="status" aria-live="polite">
-    <span class="ui-message__icon">
-      <WkSpinner v-if="type === 'loading'" size="sm" />
-      <component :is="iconComponent" v-else :size="18" />
-    </span>
-    <div class="ui-message__wrapper">
-      <span class="ui-message__content">
-        <slot>{{ content }}</slot>
+    <div class="ui-message__row">
+      <div v-if="imgSrc" class="ui-message__file-upload__preview">
+        <img :src="imgSrc" alt="" />
+      </div>
+      <span v-else class="ui-message__icon">
+        <WkSpinner v-if="type === 'loading'" size="sm" />
+        <component :is="iconComponent" v-else :size="18" />
       </span>
-      <span v-if="description" class="ui-message__description">{{ description }}</span>
+      <div class="ui-message__wrapper">
+        <span class="ui-message__content">
+          <slot>{{ content }}</slot>
+        </span>
+        <span v-if="description" class="ui-message__description">{{ description }}</span>
+      </div>
+      <WkButton
+        v-if="action"
+        size="mini"
+        :variant="progress ? 'ghost' : action.variant || 'primary'"
+        @click="handleAction"
+        :label="action.label"
+      >
+        <template #icon>
+          <WkiPause />
+        </template>
+      </WkButton>
     </div>
-    <WkButton v-if="action" size="mini" :variant="action.variant || 'primary'" @click="handleAction">{{
-      action.label
-    }}</WkButton>
+    <WkProgress v-if="progress !== null" :value="progress" />
   </div>
 </template>
 
 <script>
 import WkSpinner from '../spinner/Spinner.vue'
 import WkButton from '../button/Button.vue'
-import { WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo } from '../../icons'
+import WkProgress from '../progress/Progress.vue'
+import { WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo, WkiPause } from '../../icons'
 
 const ICON_BY_TYPE = {
   success: 'WkiCircleCheck',
@@ -30,7 +45,7 @@ const ICON_BY_TYPE = {
 
 export default {
   name: 'Message',
-  components: { WkSpinner, WkButton, WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo },
+  components: { WkSpinner, WkButton, WkProgress, WkiCircleCheck, WkiCircleX, WkiTriangleAlert, WkiInfo, WkiPause },
   props: {
     type: {
       type: String,
@@ -50,6 +65,14 @@ export default {
     action: {
       type: Object,
       default: null
+    },
+    progress: {
+      type: Number,
+      default: null
+    },
+    imgSrc: {
+      type: String,
+      default: ''
     }
   },
   emits: ['close'],

package/src/components/message/MessageContainer.vue

@@ -13,6 +13,8 @@
           :content="item.content"
           :description="item.description"
           :action="item.action"
+          :progress="item.progress"
+          :img-src="item.imgSrc"
           @close="remove(item.key)"
         />
       </div>
@@ -145,7 +147,9 @@ export default {
         existing.content = config.content != null ? config.content : ''
         existing.description = config.description || null
         existing.action = config.action || null
-        existing.onClose = config.onClose || null
+        ;((existing.progress = config.progress != null ? config.progress : null),
+          (existing.imgSrc = config.imgSrc),
+          (existing.onClose = config.onClose || null))
         this.scheduleRemoval(key, config.duration)
         return key
       }
@@ -155,6 +159,8 @@ export default {
         content: config.content != null ? config.content : '',
         description: config.description || null,
         action: config.action || null,
+        progress: config.progress != null ? config.progress : null,
+        imgSrc: config.imgSrc,
         onClose: config.onClose || null
       })
       // Enforce maxCount by evicting the oldest entries.

package/src/components/message/message.css

@@ -1,7 +1,7 @@
 .ui-message {
   pointer-events: auto;
   display: inline-flex;
-  align-items: center;
+  flex-direction: column;
   gap: var(--spacing-sm);
   max-width: 480px;
   padding: var(--spacing-sm) var(--spacing-md);
@@ -11,6 +11,12 @@
   box-shadow: var(--shadow-sonner);
 }
 
+.ui-message__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
 .ui-message__icon {
   display: inline-flex;
   align-items: center;
@@ -35,6 +41,9 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing, 0);
   word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .ui-message__description {
@@ -46,6 +55,27 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
   word-break: break-word;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+.ui-message--file-upload {
+  width: 360px;
+}
+
+.ui-message__file-upload__preview {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--rounded-sm);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.ui-message__file-upload__preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .ui-message--success .ui-message__icon {

package/src/components/message/message.js

@@ -87,6 +87,8 @@ function open(config) {
     content: config.content,
     description: config.description,
     action: config.action,
+    progress: config.progress != null ? config.progress : null,
+    imgSrc: config.imgSrc,
     duration,
     onClose: config.onClose
   })

package/src/components/select/Select.vue

@@ -176,7 +176,7 @@ export default {
       default: false
     },
     listHeight: {
-      type: Number,
+      type: [Number, String],
       default: 256
     },
     mode: {
@@ -282,7 +282,8 @@ export default {
       return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
     },
     listStyle() {
-      return { maxHeight: this.listHeight + 'px' }
+      if (typeof this.listHeight === 'number') return { maxHeight: this.listHeight + 'px' }
+      return { maxHeight: this.listHeight }
     },
     externalClass() {
       // Vue 3: class is in $attrs (inheritAttrs:false keeps it off the root)
@@ -423,9 +424,16 @@ export default {
       }
     },
     registerOption(value, label) {
+      // Guard: SelectOption.updated() calls this on every re-render. Reassigning
+      // labelCache to a new object each time invalidates dependent computeds
+      // (selectedLabel, option.isHidden), forcing another render → updated() →
+      // registerOption → … an infinite loop that lags typing in searchable mode.
+      // Skip when the label is unchanged so the reference stays stable.
+      if (this.labelCache[value] === label) return
       this.labelCache = Object.assign({}, this.labelCache, { [value]: label })
     },
     setSlotOptionVisible(value, visible) {
+      if (this.slotOptionVisible[value] === visible) return
       this.slotOptionVisible = Object.assign({}, this.slotOptionVisible, { [value]: visible })
     },
     removeSlotOption(value) {

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

@@ -85,6 +85,10 @@ export default {
     if (this.select) this.select.removeSlotOption(this.value)
   },
 
+  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle, vue/no-dupe-keys
+  beforeDestroy() {
+    if (this.select) this.select.removeSlotOption(this.value)
+  },
   watch: {
     isHidden(val) {
       if (this.select) this.select.setSlotOptionVisible(this.value, !val)

package/src/components/slider/Slider.vue

@@ -4,7 +4,8 @@
     :class="{
       'ui-slider--vertical': orientation === 'vertical',
       'ui-slider--disabled': disabled,
-      'ui-slider--range': range
+      'ui-slider--range': range,
+      [`ui-slider--${variant}`]: variant
     }"
     :style="rootStyle"
   >
@@ -88,6 +89,13 @@ export default {
         return ['horizontal', 'vertical'].indexOf(v) !== -1
       }
     },
+    variant: {
+      type: String,
+      default: 'neutral',
+      validator: function (v) {
+        return ['neutral', 'primary'].indexOf(v) !== -1
+      }
+    },
     disabled: { type: Boolean, default: false },
     width: { type: [String, Number], default: null },
     stepRanges: {

package/src/components/slider/slider.css

@@ -45,6 +45,10 @@
   pointer-events: none;
 }
 
+.ui-slider--neutral .ui-slider__fill {
+  background: var(--primary-fg);
+}
+
 .ui-slider--vertical .ui-slider__fill {
   top: auto;
   left: 0;
@@ -67,6 +71,10 @@
   transition: box-shadow 0.1s ease;
 }
 
+.ui-slider--neutral .ui-slider__thumb {
+  background: var(--primary-fg);
+}
+
 .ui-slider--vertical .ui-slider__thumb {
   top: auto;
   left: 50%;
@@ -79,6 +87,12 @@
     0 0 0 5px color-mix(in srgb, var(--primary-brand-bg) 20%, transparent);
 }
 
+.ui-slider--neutral .ui-slider__thumb:hover {
+  box-shadow:
+    var(--shadow-xs),
+    0 0 0 5px color-mix(in srgb, var(--primary-fg) 20%, transparent);
+}
+
 .ui-slider__thumb:focus-visible {
   box-shadow: var(--shadow-xs), var(--shadow-focus-ring);
 }

package/src/components/toggle/toggle.css

@@ -132,7 +132,6 @@
 }
 .ui-toggle--variant-outlined.ui-toggle--active {
   background: var(--outline-active);
-  color: var(--primary-fg);
 }
 
 /* ============================================================
@@ -165,6 +164,14 @@
   pointer-events: none;
 }
 
+.ui-toggle--variant-outlined:disabled {
+  background: var(--secondary-bg);
+}
+
+.ui-toggle--variant-outlined.ui-toggle--active:disabled {
+  background: var(--tertiary-bg);
+}
+
 /* ============================================================
    Icon-only — square button per size
    ============================================================ */

package/src/components/tooltip/Tooltip.vue

@@ -26,7 +26,12 @@
       <span class="ui-tooltip__text">
         <slot name="content">{{ title }}</slot>
       </span>
-      <span v-if="arrow" :class="['ui-tooltip__arrow', `ui-tooltip__arrow--${side}`]" aria-hidden="true"></span>
+      <span
+        v-if="arrow"
+        :class="['ui-tooltip__arrow', `ui-tooltip__arrow--${side}`]"
+        :style="arrowStyle"
+        aria-hidden="true"
+      ></span>
     </span>
   </span>
 </template>
@@ -36,6 +41,7 @@ import { acquire, release } from '../../floating/portal-root.js'
 import { nextZIndex } from '../../floating/layer-manager.js'
 
 const GAP = 4
+const EDGE_PAD = 4
 
 export default {
   name: 'Tooltip',
@@ -61,12 +67,14 @@ export default {
   data() {
     return {
       hovered: false,
-      positionStyle: {}
+      triggerInView: true,
+      positionStyle: {},
+      arrowStyle: {}
     }
   },
   computed: {
     isVisible() {
-      return this.open || this.hovered
+      return (this.open || this.hovered) && this.triggerInView
     },
     hasMaxWidth() {
       return this.maxWidth !== '' && this.maxWidth !== null && this.maxWidth !== undefined
@@ -81,22 +89,42 @@ export default {
   },
   watch: {
     isVisible(v) {
-      if (v) this.$nextTick(this.updatePosition)
+      if (v) {
+        this.$nextTick(() => {
+          this._mountToPortal()
+          this.updatePosition()
+        })
+      } else {
+        this._unmountFromPortal()
+      }
     },
     side() {
       if (this.isVisible) this.$nextTick(this.updatePosition)
     }
   },
   mounted() {
-    if (typeof document !== 'undefined' && this.$refs.tooltip) {
-      this._tooltipPortalRoot = acquire()
-      if (this._tooltipPortalRoot) {
-        this._tooltipPortalRoot.appendChild(this.$refs.tooltip)
-      }
+    const tip = this.$refs.tooltip
+    if (tip) {
+      this._originalParent = tip.parentNode
+      this._originalNextSibling = tip.nextSibling
+    }
+    if (typeof IntersectionObserver !== 'undefined' && this.$refs.trigger) {
+      this._triggerObserver = new IntersectionObserver(
+        ([entry]) => {
+          this.triggerInView = entry.isIntersecting
+        },
+        { threshold: 0 }
+      )
+      this._triggerObserver.observe(this.$refs.trigger)
     }
     window.addEventListener('scroll', this.onScrollOrResize, true)
     window.addEventListener('resize', this.onScrollOrResize)
-    if (this.open) this.$nextTick(this.updatePosition)
+    if (this.open) {
+      this.$nextTick(() => {
+        this._mountToPortal()
+        this.updatePosition()
+      })
+    }
     if (typeof this.$on === 'function') {
       // eslint-disable-next-line vue/no-deprecated-events-api
       this.$on('hook:beforeDestroy', this.cleanup)
@@ -141,6 +169,17 @@ export default {
         top = t.top + (t.height - th) / 2
         left = t.right + GAP
       }
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      left = Math.max(EDGE_PAD, Math.min(left, vw - tw - EDGE_PAD))
+      top = Math.max(EDGE_PAD, Math.min(top, vh - th - EDGE_PAD))
+
+      if (this.side === 'top' || this.side === 'bottom') {
+        this.arrowStyle = { left: t.left + t.width / 2 - left + 'px' }
+      } else {
+        this.arrowStyle = { top: t.top + t.height / 2 - top + 'px' }
+      }
+
       this.positionStyle = {
         position: 'fixed',
         top: top + 'px',
@@ -148,11 +187,35 @@ export default {
         zIndex: nextZIndex()
       }
     },
+    _mountToPortal() {
+      const tip = this.$refs.tooltip
+      if (typeof document === 'undefined' || !tip) return
+      if (!this._tooltipPortalRoot) {
+        this._tooltipPortalRoot = acquire()
+      }
+      if (this._tooltipPortalRoot && tip.parentNode !== this._tooltipPortalRoot) {
+        this._tooltipPortalRoot.appendChild(tip)
+      }
+    },
+    _unmountFromPortal() {
+      const tip = this.$refs.tooltip
+      if (!tip || !this._tooltipPortalRoot) return
+      if (tip.parentNode === this._tooltipPortalRoot && this._originalParent) {
+        this._originalParent.insertBefore(tip, this._originalNextSibling || null)
+      }
+      release()
+      this._tooltipPortalRoot = null
+    },
     cleanup() {
+      if (this._triggerObserver) {
+        this._triggerObserver.disconnect()
+        this._triggerObserver = null
+      }
       window.removeEventListener('scroll', this.onScrollOrResize, true)
       window.removeEventListener('resize', this.onScrollOrResize)
-      if (this.$refs.tooltip && this.$refs.tooltip.parentNode) {
-        this.$refs.tooltip.parentNode.removeChild(this.$refs.tooltip)
+      const tip = this.$refs.tooltip
+      if (tip && tip.parentNode && tip.parentNode !== this._originalParent) {
+        tip.parentNode.removeChild(tip)
       }
       if (this._tooltipPortalRoot) {
         release()

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

@@ -1,34 +0,0 @@
-// Configured Day.js singleton for the date-picker.
-//
-// Day.js ships as a tiny core; every feature the picker needs (custom format
-// parsing, locale-aware week start, week/quarter numbers, inclusive comparisons)
-// lives in an opt-in plugin. We register them ONCE here and re-export the same
-// instance so every date-picker file shares one configured dayjs — importing
-// `dayjs` directly elsewhere would get the unconfigured core.
-//
-// `dayjs.extend` is idempotent (re-extending with the same plugin is a no-op),
-// so this module is safe to import from multiple files under both the Vite
-// (Vue 3) and webpack (Vue 2) bundlers.
-import dayjs from 'dayjs'
-
-import customParseFormat from 'dayjs/plugin/customParseFormat.js'
-import localeData from 'dayjs/plugin/localeData.js'
-import weekday from 'dayjs/plugin/weekday.js'
-import weekOfYear from 'dayjs/plugin/weekOfYear.js'
-import isoWeek from 'dayjs/plugin/isoWeek.js'
-import advancedFormat from 'dayjs/plugin/advancedFormat.js'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore.js'
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter.js'
-import quarterOfYear from 'dayjs/plugin/quarterOfYear.js'
-
-dayjs.extend(customParseFormat)
-dayjs.extend(localeData)
-dayjs.extend(weekday)
-dayjs.extend(weekOfYear)
-dayjs.extend(isoWeek)
-dayjs.extend(advancedFormat)
-dayjs.extend(isSameOrBefore)
-dayjs.extend(isSameOrAfter)
-dayjs.extend(quarterOfYear)
-
-export default dayjs