webcake-ui-kit 1.0.0 → 1.0.2

package/src/components/accordion-item/accordion-item.css

@@ -0,0 +1,143 @@
+.ui-accordion-item {
+  display: flex;
+  flex-direction: column;
+  background: var(--card);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.ui-accordion-item--bordered {
+  border-bottom: 0;
+  border-top: 1px solid var(--border-primary);
+  border-left: 1px solid var(--border-primary);
+  border-right: 1px solid var(--border-primary);
+}
+
+.ui-accordion-item--bordered:last-child {
+  border-bottom: 1px solid var(--border-primary);
+  border-bottom-left-radius: var(--rounded-3xl);
+  border-bottom-right-radius: var(--rounded-3xl);
+}
+
+.ui-accordion-item--bordered:first-child {
+  border-top-left-radius: var(--rounded-3xl);
+  border-top-right-radius: var(--rounded-3xl);
+}
+
+.ui-accordion-item--disabled {
+  opacity: 0.5;
+}
+
+.ui-accordion-item__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-sm) 0;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  outline: none;
+  cursor: pointer;
+  font-family: inherit;
+  color: var(--primary-fg);
+  text-align: left;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ui-accordion-item--bordered .ui-accordion-item__trigger {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.ui-accordion-item__trigger:disabled {
+  cursor: not-allowed;
+}
+
+.ui-accordion-item__trigger:focus-visible {
+  box-shadow: var(--shadow-focus-ring);
+}
+
+.ui-accordion-item__label-row {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.ui-accordion-item__label {
+  flex: 1 1 0;
+  min-width: 0;
+  font-family: var(--paragraph-small-font-family);
+  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-medium-font-weight);
+  color: var(--primary-fg);
+}
+
+.ui-accordion-item__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  background: var(--outline);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-lg);
+  font-family: var(--paragraph-mini-font-family);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+  font-weight: var(--paragraph-bold-font-weight);
+  color: var(--primary-fg);
+  white-space: nowrap;
+}
+
+.ui-accordion-item__append {
+  flex-shrink: 0;
+  font-family: var(--paragraph-small-font-family);
+  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);
+  white-space: nowrap;
+}
+
+.ui-accordion-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--primary-fg);
+  transition: transform 0.2s ease;
+}
+
+.ui-accordion-item__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-accordion-item__icon--open {
+  transform: rotate(180deg);
+}
+
+.ui-accordion-item__content {
+  padding: 0 0 var(--spacing-md);
+  font-family: var(--paragraph-small-font-family);
+  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(--primary-fg);
+}
+
+.ui-accordion-item--bordered .ui-accordion-item__content {
+  padding: 0 var(--spacing-md) var(--spacing-md);
+}

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

@@ -0,0 +1,82 @@
+<template>
+  <Dialog
+    :open="isOpen"
+    :show-header="false"
+    :footer="true"
+    :footer-align="'right'"
+    :footer-divider="true"
+    :centered="true"
+    :mask="mask"
+    :mask-closable="maskClosable"
+    :keyboard="keyboard"
+    :append-to-body="appendToBody"
+    :z-index="zIndex"
+    @change="setOpen"
+    @after-close="$emit('after-close')"
+  >
+    <div class="ui-alert-dialog-body">
+      <div class="ui-alert-dialog-title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div class="ui-alert-dialog-description">
+        <slot>{{ description }}</slot>
+      </div>
+    </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>
+      </slot>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '../dialog/Dialog.vue'
+import Button from '../button/Button.vue'
+
+export default {
+  name: 'AlertDialog',
+  components: { Dialog, Button },
+  model: { prop: 'open', event: 'change' },
+  props: {
+    open: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    title: { type: String, default: '' },
+    description: { type: String, default: '' },
+    okText: { type: String, default: 'Continue' },
+    cancelText: { type: String, default: 'Cancel' },
+    okVariant: { type: String, default: 'primary' },
+    cancelVariant: { type: String, default: 'outline' },
+    confirmLoading: { type: Boolean, default: false },
+    mask: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: false },
+    keyboard: { type: Boolean, default: false },
+    appendToBody: { type: Boolean, default: true },
+    zIndex: { type: [Number, String], default: 1000 }
+  },
+  emits: ['change', 'update:modelValue', 'ok', 'cancel', 'after-close'],
+  computed: {
+    isOpen() {
+      return this.modelValue !== undefined ? this.modelValue : this.open
+    }
+  },
+  methods: {
+    setOpen(v) {
+      this.$emit('change', v)
+      this.$emit('update:modelValue', v)
+    },
+    handleOk(e) {
+      this.$emit('ok', e)
+    },
+    handleCancel(e) {
+      this.$emit('cancel', e)
+      this.setOpen(false)
+    }
+  }
+}
+</script>
+
+<style src="./alert-dialog.css" scoped></style>

package/src/components/alert-dialog/alert-dialog.css

@@ -0,0 +1,33 @@
+.ui-alert-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.ui-alert-dialog-title {
+  font-family: var(--heading-4-font-family);
+  font-size: var(--heading-4-font-size);
+  line-height: var(--heading-4-line-height);
+  font-weight: var(--heading-4-font-weight);
+  letter-spacing: var(--heading-4-letter-spacing);
+  color: var(--primary-fg);
+}
+
+.ui-alert-dialog-description {
+  font-family: var(--paragraph-small-font-family);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  color: var(--muted-fg);
+}
+
+@media (max-width: 767px) {
+  .ui-alert-dialog-body {
+    text-align: center;
+  }
+
+  .ui-alert-dialog-btn {
+    flex: 1 0 0;
+    min-width: 0;
+  }
+}

package/src/components/badge/Badge.vue

@@ -34,10 +34,10 @@ export default {
   emits: [],
   computed: {
     hasIconLeft() {
-      return !!((this.$scopedSlots && this.$scopedSlots['icon-left']) || this.$slots['icon-left'])
+      return !!this.$slots['icon-left']
     },
     hasIconRight() {
-      return !!((this.$scopedSlots && this.$scopedSlots['icon-right']) || this.$slots['icon-right'])
+      return !!this.$slots['icon-right']
     }
   }
 }

package/src/components/badge/badge.css

@@ -54,10 +54,7 @@
 
 .ui-badge:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-focus-ring);
-}
-.ui-badge--destructive:focus-visible {
-  box-shadow: var(--shadow-focus-ring-error);
+  box-shadow: 0 0 0 3px var(--focus-ring);
 }
 
 .ui-badge__icon {

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,85 @@
+<template>
+  <nav class="ui-breadcrumb" aria-label="breadcrumb">
+    <ol class="ui-breadcrumb__list">
+      <slot>
+        <li v-for="(item, index) in items" :key="index" class="ui-breadcrumb__row">
+          <span v-if="index > 0" class="ui-breadcrumb__separator" aria-hidden="true">
+            <slot name="separator" :type="separator">
+              <svg
+                v-if="separator === 'slash'"
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+              >
+                <g clip-path="url(#clip0_3182_3913)">
+                  <path
+                    d="M12.524 0.857389C12.6948 0.686535 12.9718 0.686535 13.1426 0.857389C13.3135 1.02824 13.3135 1.30519 13.1426 1.47604L1.47598 13.1427C1.30513 13.3136 1.02818 13.3136 0.857328 13.1427C0.686473 12.9719 0.686473 12.6949 0.857328 12.5241L12.524 0.857389Z"
+                    fill="#5C5C5C"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_3182_3913">
+                    <rect width="14" height="14" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+              <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="M4.88882 3.13888C5.08815 2.93955 5.41182 2.93955 5.61115 3.13888L9.11115 6.63888C9.31048 6.83821 9.31048 7.16188 9.11115 7.36121L5.61115 10.8612C5.41182 11.0605 5.08815 11.0605 4.88882 10.8612C4.68949 10.6619 4.68949 10.3382 4.88882 10.1389L8.02765 7.00004L4.88882 3.86121C4.68949 3.66188 4.68949 3.33821 4.88882 3.13888Z"
+                  fill="#5C5C5C"
+                />
+              </svg>
+            </slot>
+          </span>
+          <component
+            :is="getTag(item)"
+            v-if="!isActive(item, index)"
+            :href="item.href"
+            class="ui-breadcrumb__link"
+            @click="onItemClick(item, index, $event)"
+          >
+            <span v-if="item.icon" class="ui-breadcrumb__icon" v-html="item.icon"></span>
+            <span v-if="item.label" class="ui-breadcrumb__label">{{ item.label }}</span>
+          </component>
+          <span v-else class="ui-breadcrumb__current" aria-current="page">
+            <span v-if="item.icon" class="ui-breadcrumb__icon" v-html="item.icon"></span>
+            <span v-if="item.label" class="ui-breadcrumb__label">{{ item.label }}</span>
+          </span>
+        </li>
+      </slot>
+    </ol>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'Breadcrumb',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    separator: {
+      type: String,
+      default: 'chevron',
+      validator: v => ['chevron', 'slash'].includes(v)
+    }
+  },
+  emits: ['click'],
+  methods: {
+    isActive(item, index) {
+      return index === this.items.length - 1
+    },
+    onItemClick(item, index, e) {
+      this.$emit('click', item, index, e)
+    },
+    getTag(item) {
+      return item.href ? 'a' : 'span'
+    }
+  }
+}
+</script>
+
+<style src="./breadcrumb.css" scoped></style>

package/src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,90 @@
+.ui-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ui-breadcrumb__list {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-2xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ui-breadcrumb__row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  list-style: none;
+}
+
+.ui-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  color: var(--muted-fg);
+}
+
+.ui-breadcrumb__separator svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.ui-breadcrumb__link,
+.ui-breadcrumb__current {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  font-family: var(--paragraph-small-font-family);
+  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);
+  border-radius: var(--rounded-sm);
+}
+
+.ui-breadcrumb__link {
+  color: var(--muted-fg);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.ui-breadcrumb__link:hover {
+  color: var(--primary-fg);
+}
+
+.ui-breadcrumb__link:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus-ring);
+}
+
+.ui-breadcrumb__current {
+  color: var(--primary-fg);
+  font-weight: var(--paragraph-medium-font-weight);
+}
+
+.ui-breadcrumb__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.ui-breadcrumb__icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.ui-breadcrumb__label {
+  white-space: nowrap;
+}

package/src/components/button/Button.vue

@@ -1,32 +1,99 @@
 <template>
-  <button :class="['ui-btn', `ui-btn--${type}`, `ui-btn--${size}`]" :disabled="disabled" @click="handleClick">
-    <slot></slot>
+  <button
+    :class="[
+      'ui-btn',
+      `ui-btn--${variant}`,
+      `ui-btn--${size}`,
+      `ui-btn--round-${roundness}`,
+      isIconOnly && 'ui-btn--icon-only',
+      loading && 'ui-btn--loading'
+    ]"
+    :type="htmlType"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <!-- Left Icon / Spinner -->
+    <Spinner v-if="loading" size="sm" type="mirrored" />
+
+    <template v-if="showLeftIcon">
+      <span v-if="hasIconOnly" class="ui-btn__icon">
+        <slot name="icon"></slot>
+      </span>
+      <span v-if="hasIconLeft" class="ui-btn__icon">
+        <slot name="icon-left"></slot>
+      </span>
+    </template>
+
+    <!-- Label -->
+    <span v-if="!isIconOnly && (hasDefaultSlot || label)" class="ui-btn__label">
+      <slot>{{ label }}</slot>
+    </span>
+
+    <!-- Right Icon -->
+    <span v-if="hasIconRight" class="ui-btn__icon">
+      <slot name="icon-right"></slot>
+    </span>
   </button>
 </template>
 
 <script>
+import Spinner from '../spinner/Spinner.vue'
+
 export default {
   name: 'Button',
+  components: {
+    Spinner
+  },
   props: {
-    type: {
+    variant: {
       type: String,
       default: 'primary',
-      validator: value => ['primary', 'secondary', 'danger', 'success'].includes(value)
+      validator: v => ['primary', 'neutral', 'secondary', 'outline', 'ghost', 'destructive', 'link'].includes(v)
     },
     size: {
       type: String,
-      default: 'medium',
-      validator: value => ['small', 'medium', 'large'].includes(value)
+      default: 'md',
+      validator: v => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v)
+    },
+    roundness: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'round'].includes(v)
     },
-    disabled: {
-      type: Boolean,
-      default: false
+    label: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    htmlType: {
+      type: String,
+      default: 'button',
+      validator: v => ['button', 'submit', 'reset'].includes(v)
     }
   },
   emits: ['click'],
+  computed: {
+    hasIconLeft() {
+      return !!this.$slots['icon-left']
+    },
+    hasIconRight() {
+      return !this.loading && !!this.$slots['icon-right']
+    },
+    hasIconOnly() {
+      return !!this.$slots['icon']
+    },
+    hasDefaultSlot() {
+      return !!this.$slots['default']
+    },
+    isIconOnly() {
+      const iconCount = [this.hasIconOnly, this.hasIconLeft, this.hasIconRight].filter(Boolean).length
+      return !this.label && !this.hasDefaultSlot && iconCount === 1
+    },
+    showLeftIcon() {
+      return !this.loading && (this.hasIconLeft || this.hasIconOnly)
+    }
+  },
   methods: {
     handleClick(e) {
-      if (!this.disabled) {
+      if (!this.disabled && !this.loading) {
         this.$emit('click', e)
       }
     }