webcake-ui-kit 1.0.0 → 1.0.2

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

@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="ui-select-option"
+    :class="{
+      'ui-select-option--selected': isSelected,
+      'ui-select-option--disabled': isDisabled,
+      'ui-select-option--large': size === 'large',
+      'ui-select-option--destructive': variant === 'destructive'
+    }"
+    tabindex="0"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space.prevent="handleClick"
+  >
+    <slot>{{ label || value }}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectOption',
+
+  inject: {
+    select: { default: null }
+  },
+
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'regular',
+      validator: function (v) {
+        return ['regular', 'large'].indexOf(v) !== -1
+      }
+    },
+    variant: {
+      type: String,
+      default: 'default',
+      validator: function (v) {
+        return ['default', 'destructive'].indexOf(v) !== -1
+      }
+    }
+  },
+
+  emits: [],
+
+  mounted() {
+    if (this.select && this.select.registerOption) {
+      this.select.registerOption(this.value, this.label || this.value)
+    }
+  },
+
+  computed: {
+    isSelected() {
+      return this.select ? this.select.value === this.value : false
+    },
+    isDisabled() {
+      return this.disabled || (this.select ? this.select.disabled : false)
+    }
+  },
+
+  methods: {
+    handleClick() {
+      if (this.isDisabled || !this.select) return
+      this.select.select(this.value)
+    }
+  }
+}
+</script>
+
+<style src="./select_option.css" scoped></style>

package/src/components/select-option/select_option.css

@@ -0,0 +1,60 @@
+.ui-select-option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-height: 32px;
+  padding: var(--spacing-5p5) var(--spacing-xs);
+  border-radius: var(--radius);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  font-weight: var(--paragraph-font-weight);
+  color: var(--primary-fg);
+  cursor: pointer;
+  transition: background 0.15s;
+  outline: none;
+}
+
+.ui-select-option:hover {
+  background: var(--accent-bg);
+}
+
+.ui-select-option:focus-visible {
+  background: var(--accent-bg);
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+.ui-select-option:active {
+  background: var(--accent-2);
+}
+
+.ui-select-option--selected {
+  background: var(--accent-2);
+  font-weight: var(--paragraph-medium-font-weight);
+}
+
+.ui-select-option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ui-select-option--large {
+  min-height: 36px;
+  padding: var(--spacing-7p5) var(--spacing-sm);
+  gap: var(--spacing-sm);
+}
+
+.ui-select-option--destructive {
+  color: var(--destructive-text);
+}
+
+.ui-select-option--destructive:hover,
+.ui-select-option--destructive:active {
+  background: var(--negative-subtle);
+}
+
+.ui-select-option--destructive:focus-visible {
+  background: transparent;
+  box-shadow: 0 0 0 3px var(--ring);
+}

package/src/components/sidebar-group-label/SidebarGroupLabel.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="ui-sidebar-group-label"
+    :class="{
+      'ui-sidebar-group-label--collapsible': collapsible,
+      'ui-sidebar-group-label--collapsed': collapsible && !expanded
+    }"
+  >
+    <button
+      v-if="collapsible"
+      class="ui-sidebar-group-label__trigger"
+      :aria-expanded="String(expanded)"
+      @click="$emit('toggle')"
+    >
+      <span class="ui-sidebar-group-label__text"
+        ><slot>{{ label }}</slot></span
+      >
+      <span class="ui-sidebar-group-label__chevron" aria-hidden="true">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path
+            d="M3 4.5L6 7.5L9 4.5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+    </button>
+    <span v-else class="ui-sidebar-group-label__text"
+      ><slot>{{ label }}</slot></span
+    >
+    <span v-if="hasActionSlot" class="ui-sidebar-group-label__action">
+      <slot name="action" />
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarGroupLabel',
+
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    collapsible: {
+      type: Boolean,
+      default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  emits: ['toggle'],
+
+  computed: {
+    hasActionSlot() {
+      return !!((this.$scopedSlots && this.$scopedSlots['action']) || this.$slots['action'])
+    }
+  }
+}
+</script>
+
+<style src="./sidebar_group_label.css" scoped></style>

package/src/components/sidebar-group-label/sidebar_group_label.css

@@ -0,0 +1,61 @@
+.ui-sidebar-group-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  margin-bottom: var(--spacing-3xs);
+}
+
+/* Collapsible: full-width trigger button */
+.ui-sidebar-group-label__trigger {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+  min-width: 0;
+}
+
+.ui-sidebar-group-label__trigger:focus-visible {
+  outline: none;
+  border-radius: var(--radius-4);
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+/* Label text (shared between trigger and plain span) */
+.ui-sidebar-group-label__text {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sidebar-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Chevron rotates on collapse */
+.ui-sidebar-group-label__chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-muted);
+  transition: transform 0.2s ease;
+}
+
+.ui-sidebar-group-label--collapsed .ui-sidebar-group-label__chevron {
+  transform: rotate(-90deg);
+}
+
+/* Optional action slot (mini button) */
+.ui-sidebar-group-label__action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}

package/src/components/sidebar-item/SidebarItem.vue

@@ -0,0 +1,110 @@
+<template>
+  <button
+    class="ui-sidebar-item"
+    :class="{
+      'ui-sidebar-item--active': active,
+      'ui-sidebar-item--disabled': disabled,
+      'ui-sidebar-item--large': size === 'large',
+      'ui-sidebar-item--level-2': level === 2,
+      'ui-sidebar-item--has-children': hasChildren,
+      'ui-sidebar-item--expanded': hasChildren && expanded,
+      'ui-sidebar-item--collapsed': collapsed
+    }"
+    :tabindex="disabled ? -1 : 0"
+    :aria-current="active ? 'page' : undefined"
+    :aria-disabled="disabled ? true : undefined"
+    :aria-expanded="hasChildren ? String(expanded) : undefined"
+    @click="handleClick"
+  >
+    <span v-if="hasIconSlot" class="ui-sidebar-item__icon" aria-hidden="true">
+      <slot name="icon" />
+    </span>
+    <span class="ui-sidebar-item__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span v-if="badge" class="ui-sidebar-item__badge">{{ badge }}</span>
+    <span v-if="hasChildren" class="ui-sidebar-item__chevron" aria-hidden="true">
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path
+          d="M3 4.5L6 7.5L9 4.5"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'SidebarItem',
+
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'regular',
+      validator: function (v) {
+        return ['regular', 'large'].indexOf(v) !== -1
+      }
+    },
+    level: {
+      type: Number,
+      default: 1,
+      validator: function (v) {
+        return [1, 2].indexOf(v) !== -1
+      }
+    },
+    badge: {
+      type: String,
+      default: ''
+    },
+    hasChildren: {
+      type: Boolean,
+      default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  emits: ['click', 'toggle'],
+
+  computed: {
+    hasIconSlot() {
+      return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
+    }
+  },
+
+  methods: {
+    handleClick() {
+      if (this.disabled) return
+      if (this.hasChildren) {
+        this.$emit('toggle')
+      } else {
+        this.$emit('click')
+      }
+    }
+  }
+}
+</script>
+
+<style src="./sidebar_item.css" scoped></style>

package/src/components/sidebar-item/sidebar_item.css

@@ -0,0 +1,142 @@
+.ui-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  padding: var(--spacing-5) var(--spacing-xs);
+  border-radius: var(--radius-6);
+  color: var(--sidebar-foreground);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  text-align: left;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.ui-sidebar-item:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.ui-sidebar-item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.ui-sidebar-item:active {
+  background-color: var(--sidebar-accent);
+}
+
+/* Active (selected page) */
+.ui-sidebar-item--active {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-primary);
+  font-weight: 500;
+}
+
+/* Disabled */
+.ui-sidebar-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Large size */
+.ui-sidebar-item--large {
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+  font-size: 15px;
+}
+
+/* Level 2 — nested, indented */
+.ui-sidebar-item--level-2 {
+  padding-left: var(--spacing-lg);
+}
+
+/* Icon */
+.ui-sidebar-item__icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sidebar-muted);
+}
+
+.ui-sidebar-item--active .ui-sidebar-item__icon,
+.ui-sidebar-item:hover .ui-sidebar-item__icon {
+  color: inherit;
+}
+
+/* Label */
+.ui-sidebar-item__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Badge count */
+.ui-sidebar-item__badge {
+  flex-shrink: 0;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--spacing-2xs);
+  border-radius: var(--radius-infinite);
+  background-color: var(--sidebar-primary);
+  color: var(--sidebar-primary-foreground);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: center;
+}
+
+/* Expand / collapse chevron */
+.ui-sidebar-item__chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-muted);
+  transition: transform 0.2s ease;
+}
+
+.ui-sidebar-item--expanded .ui-sidebar-item__chevron {
+  transform: rotate(180deg);
+}
+
+/* Collapsed (icon-only) mode */
+.ui-sidebar-item--collapsed {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  justify-content: center;
+}
+
+.ui-sidebar-item--collapsed .ui-sidebar-item__label,
+.ui-sidebar-item--collapsed .ui-sidebar-item__badge,
+.ui-sidebar-item--collapsed .ui-sidebar-item__chevron {
+  display: none;
+}
+
+.ui-sidebar-item--collapsed .ui-sidebar-item__icon {
+  width: 18px;
+  height: 18px;
+  color: var(--sidebar-foreground);
+}
+
+.ui-sidebar-item--collapsed.ui-sidebar-item--active .ui-sidebar-item__icon {
+  color: var(--sidebar-primary);
+}
+
+.ui-sidebar-item--collapsed.ui-sidebar-item--large {
+  width: 40px;
+  height: 40px;
+}