webcake-ui-kit 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -18,6 +18,8 @@
     "./WkAccordion": "./src/components/accordion/Accordion.vue",
     "./WkAccordionItem": "./src/components/accordion-item/AccordionItem.vue",
     "./WkAlertDialog": "./src/components/alert-dialog/AlertDialog.vue",
+    "./WkAvatar": "./src/components/avatar/Avatar.vue",
+    "./WkAvatarStack": "./src/components/avatar-stack/AvatarStack.vue",
     "./WkBadge": "./src/components/badge/Badge.vue",
     "./WkBreadcrumb": "./src/components/breadcrumb/Breadcrumb.vue",
     "./WkButton": "./src/components/button/Button.vue",
@@ -26,6 +28,9 @@
     "./WkCheckboxGroup": "./src/components/checkbox-group/CheckboxGroup.vue",
     "./WkDialog": "./src/components/dialog/Dialog.vue",
     "./WkDivider": "./src/components/divider/Divider.vue",
+    "./WkEmpty": "./src/components/empty/Empty.vue",
+    "./WkEmptyIcon": "./src/components/empty-icon/EmptyIcon.vue",
+    "./WkField": "./src/components/field/Field.vue",
     "./WkInput": "./src/components/input/Input.vue",
     "./WkPagination": "./src/components/pagination/Pagination.vue",
     "./WkRadio": "./src/components/radio/Radio.vue",
@@ -44,6 +49,7 @@
     "./WkTag": "./src/components/tag/Tag.vue",
     "./WkToggle": "./src/components/toggle/Toggle.vue",
     "./WkToggleGroup": "./src/components/toggle-group/ToggleGroup.vue",
+    "./WkTooltip": "./src/components/tooltip/Tooltip.vue",
     "./WkTypography": "./src/components/typography/Typography.vue",
     "./components/*": "./src/components/*",
     "./icons": "./src/icons/index.js",

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,54 @@
+<template>
+  <span :class="['ui-avatar', `ui-avatar--${size}`, `ui-avatar--${roundness}`]">
+    <img v-if="showImage" class="ui-avatar__image" :src="src" :alt="alt" @error="onImageError" />
+    <span v-else class="ui-avatar__fallback">
+      <slot>{{ name }}</slot>
+    </span>
+    <span v-if="online" class="ui-avatar__indicator" aria-hidden="true"></span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    size: {
+      type: String,
+      default: 'regular',
+      validator: v => ['regular', 'small', 'tiny', 'extra-tiny'].includes(v)
+    },
+    roundness: {
+      type: String,
+      default: 'round',
+      validator: v => ['round', 'roundrect'].includes(v)
+    },
+    src: { type: String, default: '' },
+    alt: { type: String, default: '' },
+    name: { type: String, default: '' },
+    online: { type: Boolean, default: false }
+  },
+  emits: [],
+  data() {
+    return {
+      imageError: false
+    }
+  },
+  computed: {
+    showImage() {
+      return !!this.src && !this.imageError
+    }
+  },
+  watch: {
+    src() {
+      this.imageError = false
+    }
+  },
+  methods: {
+    onImageError() {
+      this.imageError = true
+    }
+  }
+}
+</script>
+
+<style src="./avatar.css" scoped></style>

package/src/components/avatar/avatar.css

@@ -0,0 +1,91 @@
+.ui-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--accent-bg);
+  color: var(--primary-fg);
+  font-family: var(--font-family-body);
+  font-weight: var(--paragraph-bold-font-weight);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  vertical-align: middle;
+  overflow: visible;
+}
+
+/* Sizes — match Figma frame widths exactly */
+.ui-avatar--regular {
+  width: 40px;
+  height: 40px;
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+}
+.ui-avatar--small {
+  width: 32px;
+  height: 32px;
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+.ui-avatar--tiny {
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+  line-height: 16px;
+}
+.ui-avatar--extra-tiny {
+  width: 20px;
+  height: 20px;
+  font-size: 9px;
+  line-height: 12px;
+}
+
+/* Roundness */
+.ui-avatar--round {
+  border-radius: var(--rounded-full);
+}
+.ui-avatar--roundrect {
+  border-radius: var(--rounded-lg);
+}
+
+/* Image */
+.ui-avatar__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* Fallback (initials / custom slot) */
+.ui-avatar__fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  user-select: none;
+}
+
+/* Online indicator — auto-sized per avatar size, 2px white ring punches out of avatar */
+.ui-avatar__indicator {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--rounded-full);
+  background: var(--positive-500);
+  box-shadow: 0 0 0 2px var(--primary-bg);
+}
+.ui-avatar--regular .ui-avatar__indicator {
+  width: 10px;
+  height: 10px;
+}
+.ui-avatar--small .ui-avatar__indicator {
+  width: 8px;
+  height: 8px;
+}
+.ui-avatar--tiny .ui-avatar__indicator,
+.ui-avatar--extra-tiny .ui-avatar__indicator {
+  width: 6px;
+  height: 6px;
+}

package/src/components/avatar-stack/AvatarStack.vue

@@ -0,0 +1,79 @@
+<template>
+  <span :class="['ui-avatar-stack', `ui-avatar-stack--${size}`]">
+    <Avatar
+      v-for="(item, idx) in visibleItems"
+      :key="`avatar-${idx}`"
+      :size="size"
+      :src="item.src || ''"
+      :alt="item.alt || ''"
+      :name="item.name || ''"
+      :class="itemClasses"
+    />
+    <Avatar v-if="overflowCount > 0" :size="size" :class="[...itemClasses, 'ui-avatar-stack__overflow']">
+      <slot name="overflow" v-bind="{ count: overflowCount }">{{ formattedOverflow }}</slot>
+    </Avatar>
+  </span>
+</template>
+
+<script>
+import Avatar from '../avatar/Avatar.vue'
+
+export default {
+  name: 'AvatarStack',
+  components: { Avatar },
+  props: {
+    size: {
+      type: String,
+      default: 'regular',
+      validator: v => ['regular', 'small'].includes(v)
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    max: {
+      type: Number,
+      default: 0
+    },
+    overflowLabel: {
+      type: Function,
+      default: null
+    },
+    animation: {
+      type: String,
+      default: 'none',
+      validator: v => ['none', 'pulse', 'bounce', 'ring'].includes(v)
+    }
+  },
+  emits: [],
+  computed: {
+    visibleItems() {
+      if (this.max > 0 && this.items.length > this.max) {
+        return this.items.slice(0, this.max)
+      }
+      return this.items
+    },
+    overflowCount() {
+      if (this.max > 0 && this.items.length > this.max) {
+        return this.items.length - this.max
+      }
+      return 0
+    },
+    formattedOverflow() {
+      if (typeof this.overflowLabel === 'function') {
+        return this.overflowLabel(this.overflowCount)
+      }
+      return '+' + this.overflowCount
+    },
+    itemClasses() {
+      const classes = ['ui-avatar-stack__item']
+      if (this.animation !== 'none') {
+        classes.push(`ui-avatar-stack__item--animation-${this.animation}`)
+      }
+      return classes
+    }
+  }
+}
+</script>
+
+<style src="./avatar-stack.css" scoped></style>

package/src/components/avatar-stack/avatar-stack.css

@@ -0,0 +1,110 @@
+.ui-avatar-stack {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+/* Each child avatar overlaps the previous one and shows a white ring to
+   "punch out" of its neighbours. Box-shadow follows border-radius and does
+   not take up layout space, so the avatar dimensions stay intact. */
+.ui-avatar-stack__item {
+  position: relative;
+  margin-left: -8px;
+  box-shadow: 0 0 0 2px var(--primary-bg);
+}
+.ui-avatar-stack__item:first-child {
+  margin-left: 0;
+}
+
+/* Stacking order: earlier siblings sit above later ones so the leftmost
+   avatar's ring is visible over its neighbour. */
+.ui-avatar-stack__item {
+  z-index: 1;
+}
+.ui-avatar-stack__item:nth-child(1) {
+  z-index: 5;
+}
+.ui-avatar-stack__item:nth-child(2) {
+  z-index: 4;
+}
+.ui-avatar-stack__item:nth-child(3) {
+  z-index: 3;
+}
+.ui-avatar-stack__item:nth-child(4) {
+  z-index: 2;
+}
+
+/* Overflow chip — same shape as siblings, slightly darker background. */
+.ui-avatar-stack__overflow {
+  background: var(--secondary-bg);
+  color: var(--secondary-fg);
+}
+
+/* ============================ Animations ============================
+   Three loop animations the consumer opts into via the `animation` prop
+   on AvatarStack. Each animation is applied to every visible avatar
+   child (including the "+N" overflow chip). All honour
+   `prefers-reduced-motion: reduce`. */
+
+@keyframes ui-avatar-stack-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(0.94);
+    opacity: 0.78;
+  }
+}
+
+@keyframes ui-avatar-stack-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes ui-avatar-stack-ring {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1.35);
+    opacity: 0;
+  }
+}
+
+.ui-avatar-stack__item--animation-pulse {
+  animation: ui-avatar-stack-pulse 1.6s ease-in-out infinite;
+}
+
+.ui-avatar-stack__item--animation-bounce {
+  animation: ui-avatar-stack-bounce 1.2s ease-in-out infinite;
+}
+
+.ui-avatar-stack__item--animation-ring::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  border: 2px solid var(--positive-500);
+  pointer-events: none;
+  animation: ui-avatar-stack-ring 1.6s ease-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-avatar-stack__item--animation-pulse,
+  .ui-avatar-stack__item--animation-bounce {
+    animation: none;
+  }
+  .ui-avatar-stack__item--animation-ring::after {
+    animation: none;
+    opacity: 0.6;
+    transform: scale(1.05);
+  }
+}

package/src/components/button/button.css

@@ -43,7 +43,7 @@
   letter-spacing: var(--paragraph-mini-letter-spacing);
 }
 .ui-btn--xs .ui-btn__icon,
-.ui-btn--xs :deep(svg) {
+.ui-btn--xs ::v-deep svg {
   width: 16px;
   height: 16px;
 }
@@ -57,7 +57,7 @@
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
 .ui-btn--sm .ui-btn__icon,
-.ui-btn--sm :deep(svg) {
+.ui-btn--sm ::v-deep svg {
   width: 20px;
   height: 20px;
 }
@@ -71,7 +71,7 @@
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
 .ui-btn--md .ui-btn__icon,
-.ui-btn--md :deep(svg) {
+.ui-btn--md ::v-deep svg {
   width: 20px;
   height: 20px;
 }
@@ -85,7 +85,7 @@
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
 .ui-btn--lg .ui-btn__icon,
-.ui-btn--lg :deep(svg) {
+.ui-btn--lg ::v-deep svg {
   width: 20px;
   height: 20px;
 }
@@ -99,7 +99,7 @@
   letter-spacing: var(--paragraph-regular-letter-spacing);
 }
 .ui-btn--xl .ui-btn__icon,
-.ui-btn--xl :deep(svg) {
+.ui-btn--xl ::v-deep svg {
   width: 20px;
   height: 20px;
 }

package/src/components/divider/divider.css

@@ -24,7 +24,6 @@
 .ui-divider--vertical {
   display: inline-block;
   width: 1px;
-  align-self: stretch;
 }
 
 .ui-divider--vertical.ui-divider--spacing-regular {

package/src/components/empty/Empty.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :class="['ui-empty', `ui-empty--${variant}`]">
+    <div class="ui-empty__content">
+      <div v-if="hasMedia" class="ui-empty__media">
+        <slot name="media"></slot>
+      </div>
+      <div v-if="hasTextBlock" class="ui-empty__text">
+        <p v-if="hasTitle" class="ui-empty__title">
+          <slot name="title">{{ title }}</slot>
+        </p>
+        <p v-if="hasDescription" class="ui-empty__description">
+          <slot name="description">{{ description }}</slot>
+        </p>
+      </div>
+      <div v-if="hasFooter" class="ui-empty__footer">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Empty',
+  props: {
+    variant: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'outline', 'background', 'outline-dashed'].includes(v)
+    },
+    title: { type: String, default: '' },
+    description: { type: String, default: '' }
+  },
+  emits: [],
+  computed: {
+    hasMedia() {
+      return !!((this.$scopedSlots && this.$scopedSlots.media) || this.$slots.media)
+    },
+    hasTitle() {
+      return !!this.title || !!((this.$scopedSlots && this.$scopedSlots.title) || this.$slots.title)
+    },
+    hasDescription() {
+      return !!this.description || !!((this.$scopedSlots && this.$scopedSlots.description) || this.$slots.description)
+    },
+    hasTextBlock() {
+      return this.hasTitle || this.hasDescription
+    },
+    hasFooter() {
+      return !!((this.$scopedSlots && this.$scopedSlots.default) || this.$slots.default)
+    }
+  }
+}
+</script>
+
+<style src="./empty.css" scoped></style>

package/src/components/empty/empty.css

@@ -0,0 +1,80 @@
+.ui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: var(--spacing-2xl);
+  border-radius: var(--rounded-2xl);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Variants */
+.ui-empty--default {
+  background: transparent;
+  border: 0;
+}
+.ui-empty--outline {
+  background: transparent;
+  border: 1px solid var(--border-primary);
+}
+.ui-empty--background {
+  background: var(--accent-bg);
+  border: 0;
+}
+.ui-empty--outline-dashed {
+  background: transparent;
+  border: 1px dashed var(--border-primary);
+}
+
+/* Inner content stack */
+.ui-empty__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+  width: 100%;
+}
+
+.ui-empty__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-empty__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  text-align: center;
+  width: 100%;
+}
+
+.ui-empty__title {
+  margin: 0;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-regular-font-size);
+  line-height: var(--paragraph-regular-line-height);
+  letter-spacing: var(--paragraph-regular-letter-spacing);
+  font-weight: var(--paragraph-medium-font-weight);
+  color: var(--primary-fg);
+}
+
+.ui-empty__description {
+  margin: 0;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  font-weight: var(--paragraph-font-weight);
+  color: var(--muted-fg);
+}
+
+/* Footer slot — stacks action group(s) below the text block.
+   Consumer composes button rows / link rows freely; gap matches the
+   outer content stack so a single child OR multiple children line up. */
+.ui-empty__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+}

package/src/components/empty-icon/EmptyIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <span class="ui-empty-icon">
+    <span class="ui-empty-icon__frame">
+      <slot></slot>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'EmptyIcon',
+  emits: []
+}
+</script>
+
+<style src="./empty-icon.css" scoped></style>

package/src/components/empty-icon/empty-icon.css

@@ -0,0 +1,30 @@
+.ui-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: var(--spacing-xs);
+  background: var(--secondary-bg);
+  border-radius: var(--rounded-lg);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* Inner frame fixes the icon at the Figma-specified 24x24. Consumers
+   place their <svg> (or <img>) directly in the default slot; the frame
+   normalises sizing so different icons line up. */
+.ui-empty-icon__frame {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--primary-fg);
+}
+
+.ui-empty-icon__frame ::v-deep svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/components/field/Field.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    :class="[
+      'ui-field',
+      `ui-field--${layout}`,
+      layout === 'horizontal' && `ui-field--align-${align}`,
+      required && 'ui-field--required',
+      isError && 'ui-field--error'
+    ]"
+  >
+    <div
+      v-if="hasLabel"
+      class="ui-field__label"
+      :style="layout === 'horizontal' ? { flexBasis: normalizedLabelWidth, width: normalizedLabelWidth } : null"
+    >
+      <slot name="label">{{ label }}</slot>
+    </div>
+    <div class="ui-field__body">
+      <div class="ui-field__control">
+        <slot></slot>
+      </div>
+      <div v-if="hasMessage" class="ui-field__message">
+        <span class="ui-field__message-icon" aria-hidden="true">
+          <slot name="message-icon">
+            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="8" cy="8" r="6.25" stroke="currentColor" stroke-width="1.3" />
+              <path d="M8 7.25v3.75" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+              <circle cx="8" cy="5.25" r="0.75" fill="currentColor" />
+            </svg>
+          </slot>
+        </span>
+        <span class="ui-field__message-text">
+          <slot name="message">{{ isError ? errorText : helpText }}</slot>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Field',
+  props: {
+    layout: {
+      type: String,
+      default: 'vertical',
+      validator: v => ['vertical', 'horizontal'].includes(v)
+    },
+    label: { type: String, default: '' },
+    required: { type: Boolean, default: false },
+    helpText: { type: String, default: '' },
+    errorText: { type: String, default: '' },
+    labelWidth: { type: [String, Number], default: '120px' },
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['start', 'center'].includes(v)
+    }
+  },
+  emits: [],
+  computed: {
+    hasLabel() {
+      return !!this.label || !!((this.$scopedSlots && this.$scopedSlots.label) || this.$slots.label)
+    },
+    isError() {
+      return !!this.errorText
+    },
+    hasMessage() {
+      return (
+        !!this.errorText ||
+        !!this.helpText ||
+        !!((this.$scopedSlots && this.$scopedSlots.message) || this.$slots.message)
+      )
+    },
+    normalizedLabelWidth() {
+      return typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth
+    }
+  }
+}
+</script>
+
+<style src="./field.css" scoped></style>