webcake-ui-kit 1.0.0 → 1.0.1

package/src/components/rich-checkbox-group/RichCheckboxGroup.vue

@@ -0,0 +1,59 @@
+<template>
+  <label
+    :class="['ui-rich-checkbox', flipped && 'ui-rich-checkbox--flipped', disabled && 'ui-rich-checkbox--disabled']"
+  >
+    <span class="ui-rich-checkbox__aligner">
+      <Checkbox
+        class="ui-rich-checkbox__box"
+        :checked="isChecked"
+        :error="error"
+        :disabled="disabled"
+        @change="onChange"
+      />
+    </span>
+    <span class="ui-rich-checkbox__content">
+      <span class="ui-rich-checkbox__label">
+        <slot>{{ label }}</slot>
+      </span>
+      <span v-if="hasDescription" class="ui-rich-checkbox__description">
+        <slot name="description">{{ description }}</slot>
+      </span>
+    </span>
+  </label>
+</template>
+
+<script>
+import Checkbox from '../checkbox/Checkbox.vue'
+
+export default {
+  name: 'RichCheckboxGroup',
+  components: { Checkbox },
+  model: { prop: 'checked', event: 'change' },
+  props: {
+    checked: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    error: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    flipped: { type: Boolean, default: false },
+    label: { type: String, default: '' },
+    description: { type: String, default: '' }
+  },
+  emits: ['change', 'update:modelValue'],
+  computed: {
+    isChecked() {
+      return this.modelValue !== undefined ? this.modelValue : this.checked
+    },
+    hasDescription() {
+      return !!this.$slots['description'] || !!this.description
+    }
+  },
+  methods: {
+    onChange(next) {
+      this.$emit('change', next)
+      this.$emit('update:modelValue', next)
+    }
+  }
+}
+</script>
+
+<style src="./rich-checkbox-group.css" scoped></style>

package/src/components/rich-checkbox-group/rich-checkbox-group.css

@@ -0,0 +1,54 @@
+.ui-rich-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: var(--card);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-10);
+  cursor: pointer;
+  font-family: var(--font-family-body);
+}
+
+.ui-rich-checkbox--flipped {
+  flex-direction: row-reverse;
+}
+
+.ui-rich-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ui-rich-checkbox__aligner {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 2.5px;
+}
+
+.ui-rich-checkbox__content {
+  display: flex;
+  flex: 1 0 0;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  text-align: left;
+}
+
+.ui-rich-checkbox__label {
+  width: 100%;
+  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(--foreground-alt);
+}
+
+.ui-rich-checkbox__description {
+  width: 100%;
+  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-font-weight);
+  color: var(--muted-fg);
+}

package/src/components/rich-switch-group/RichSwitchGroup.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="ui-rich-switch-group"
+    :class="{
+      'ui-rich-switch-group--flipped': flipped,
+      'ui-rich-switch-group--disabled': disabled
+    }"
+  >
+    <div v-if="!flipped" class="ui-rich-switch-group__aligner">
+      <Switch :value="value" :disabled="disabled" @change="$emit('change', $event)" @input="$emit('input', $event)" />
+    </div>
+    <div class="ui-rich-switch-group__content">
+      <span class="ui-rich-switch-group__label"
+        ><slot>{{ label }}</slot></span
+      >
+      <span v-if="hasDescription" class="ui-rich-switch-group__description">
+        <slot name="description">{{ description }}</slot>
+      </span>
+    </div>
+    <div v-if="flipped" class="ui-rich-switch-group__aligner">
+      <Switch :value="value" :disabled="disabled" @change="$emit('change', $event)" @input="$emit('input', $event)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Switch from '../switch/Switch.vue'
+
+export default {
+  name: 'RichSwitchGroup',
+  components: { Switch: Switch },
+  props: {
+    value: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    flipped: { type: Boolean, default: false },
+    label: { type: String, default: '' },
+    description: { type: String, default: '' }
+  },
+  emits: ['change', 'input'],
+  computed: {
+    hasDescription: function () {
+      var hasSlot = !!((this.$scopedSlots && this.$scopedSlots['description']) || this.$slots['description'])
+      return hasSlot || !!this.description
+    }
+  }
+}
+</script>
+
+<style src="./rich_switch_group.css" scoped></style>

package/src/components/rich-switch-group/rich_switch_group.css

@@ -0,0 +1,45 @@
+.ui-rich-switch-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: var(--inverse-fg);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  width: 240px;
+  box-sizing: border-box;
+}
+
+.ui-rich-switch-group--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.ui-rich-switch-group__aligner {
+  padding-top: 2px;
+  flex-shrink: 0;
+}
+
+.ui-rich-switch-group__content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-rich-switch-group__label {
+  display: block;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--secondary-fg);
+}
+
+.ui-rich-switch-group__description {
+  display: block;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  color: var(--muted-fg);
+}

package/src/components/select/Select.vue

@@ -0,0 +1,262 @@
+<template>
+  <div
+    class="ui-select"
+    :class="[
+      `ui-select--${size}`,
+      {
+        'ui-select--open': isOpen,
+        'ui-select--disabled': disabled,
+        'ui-select--error': error,
+        'ui-select--loading': loading
+      }
+    ]"
+    tabindex="0"
+    @click="toggle"
+    @keydown.esc="close"
+    @keydown.enter.prevent="toggle"
+    @keydown.space.prevent="toggle"
+  >
+    <span class="ui-select__left">
+      <span v-if="hasIconSlot" class="ui-select__icon">
+        <slot name="icon" />
+      </span>
+      <span v-if="prepend" class="ui-select__prepend">{{ prepend }}</span>
+      <span class="ui-select__value" :class="{ 'ui-select__value--placeholder': !selectedLabel }">
+        {{ selectedLabel || placeholder }}
+      </span>
+    </span>
+
+    <spinner v-if="loading" type="mirrored" size="sm" />
+    <span v-else class="ui-select__chevron">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M4 6L8 10L12 6"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+
+    <div ref="dropdown" v-show="isOpen" class="ui-select__dropdown" :style="dropdownStyle" @click.stop>
+      <div v-if="canScrollUp" class="ui-select__scroll-indicator ui-select__scroll-indicator--up">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M4 10L8 6L12 10"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <div
+        ref="options"
+        class="ui-select__options"
+        :style="listHeight ? { maxHeight: listHeight + 'px' } : {}"
+        @scroll="updateScrollIndicators"
+      >
+        <slot>
+          <select-option
+            v-for="opt in normalizedOptions"
+            :key="opt.value"
+            :value="opt.value"
+            :label="opt.label"
+            :disabled="opt.disabled"
+          />
+        </slot>
+      </div>
+      <div v-if="canScrollDown" class="ui-select__scroll-indicator ui-select__scroll-indicator--down">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M4 6L8 10L12 6"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectOption from '../select-option/SelectOption.vue'
+import Spinner from '../spinner/Spinner.vue'
+
+export default {
+  name: 'Select',
+
+  components: { SelectOption, Spinner },
+
+  provide() {
+    return { select: this }
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+
+  props: {
+    size: {
+      type: String,
+      default: 'default',
+      validator: function (v) {
+        return ['mini', 'sm', 'default', 'lg'].includes(v)
+      }
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: 'Select an item'
+    },
+    prepend: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    listHeight: {
+      type: Number,
+      default: 256
+    }
+  },
+
+  emits: ['change'],
+
+  data() {
+    return {
+      isOpen: false,
+      canScrollUp: false,
+      canScrollDown: false,
+      labelCache: {},
+      dropdownStyle: {}
+    }
+  },
+
+  watch: {
+    isOpen(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.positionDropdown()
+          this.updateScrollIndicators()
+        })
+      } else {
+        this.canScrollUp = false
+        this.canScrollDown = false
+      }
+    }
+  },
+
+  computed: {
+    normalizedOptions() {
+      return this.options.map(opt =>
+        typeof opt === 'string'
+          ? { label: opt, value: opt, disabled: false }
+          : { label: opt.label || opt.value, value: opt.value, disabled: !!opt.disabled }
+      )
+    },
+    selectedLabel() {
+      if (!this.value) return ''
+      if (this.labelCache[this.value]) return this.labelCache[this.value]
+      const opt = this.normalizedOptions.find(o => o.value === this.value)
+      return opt ? opt.label : this.value
+    },
+    hasIconSlot() {
+      return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
+    }
+  },
+
+  mounted() {
+    document.addEventListener('click', this.handleOutsideClick)
+    window.addEventListener('scroll', this.handleScroll, true)
+    window.addEventListener('resize', this.handleResize)
+    if (typeof document !== 'undefined' && this.$refs.dropdown) {
+      document.body.appendChild(this.$refs.dropdown)
+    }
+    if (typeof this.$on === 'function') {
+      // eslint-disable-next-line vue/no-deprecated-events-api
+      this.$on('hook:beforeDestroy', this.cleanup)
+    }
+  },
+
+  beforeUnmount() {
+    this.cleanup()
+  },
+
+  methods: {
+    toggle() {
+      if (this.disabled || this.loading) return
+      this.isOpen = !this.isOpen
+    },
+    close() {
+      this.isOpen = false
+    },
+    select(val) {
+      this.$emit('change', val)
+      this.close()
+    },
+    registerOption(value, label) {
+      this.labelCache = Object.assign({}, this.labelCache, { [value]: label })
+    },
+    positionDropdown() {
+      if (!this.$el || !this.$refs.dropdown) return
+      var rect = this.$el.getBoundingClientRect()
+      this.dropdownStyle = {
+        position: 'fixed',
+        top: rect.bottom + 4 + 'px',
+        left: rect.left + 'px',
+        width: rect.width + 'px',
+        zIndex: 1050
+      }
+    },
+    updateScrollIndicators() {
+      const el = this.$refs.options
+      if (!el) return
+      this.canScrollUp = el.scrollTop > 0
+      this.canScrollDown = el.scrollTop + el.clientHeight < el.scrollHeight
+    },
+    handleOutsideClick(e) {
+      if (!this.$el.contains(e.target) && !(this.$refs.dropdown && this.$refs.dropdown.contains(e.target))) {
+        this.close()
+      }
+    },
+    handleScroll() {
+      if (this.isOpen) this.positionDropdown()
+    },
+    handleResize() {
+      if (this.isOpen) this.positionDropdown()
+    },
+    cleanup() {
+      document.removeEventListener('click', this.handleOutsideClick)
+      window.removeEventListener('scroll', this.handleScroll, true)
+      window.removeEventListener('resize', this.handleResize)
+      if (this.$refs.dropdown && this.$refs.dropdown.parentNode === document.body) {
+        document.body.removeChild(this.$refs.dropdown)
+      }
+    }
+  }
+}
+</script>
+
+<style src="./select.css" scoped></style>

package/src/components/select/select.css

@@ -0,0 +1,207 @@
+.ui-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-height: 36px;
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-10);
+  background: var(--input);
+  box-shadow: var(--shadow-xs);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.ui-select:hover:not(.ui-select--disabled) {
+  border-color: var(--border-focus);
+}
+
+.ui-select:focus-visible,
+.ui-select--open {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-xs), var(--shadow-focus-ring);
+}
+
+.ui-select--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ui-select--loading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+.ui-select--error {
+  border-color: var(--destructive-border);
+}
+
+.ui-select--error:hover:not(.ui-select--disabled),
+.ui-select--error:focus-visible,
+.ui-select--error.ui-select--open {
+  border-color: var(--destructive-border);
+  box-shadow: var(--shadow-xs), var(--shadow-focus-ring-error);
+}
+
+.ui-select__left {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  overflow: hidden;
+}
+
+.ui-select__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--muted-fg);
+}
+
+.ui-select__prepend {
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--muted-fg);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ui-select__value {
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--primary-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-select__value--placeholder {
+  color: var(--muted-fg);
+}
+
+.ui-select__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--muted-fg);
+  transition: transform 0.2s ease;
+}
+
+.ui-select--open .ui-select__chevron {
+  transform: rotate(180deg);
+}
+
+.ui-select__spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--muted-fg);
+  animation: ui-select-spin 0.75s linear infinite;
+}
+
+@keyframes ui-select-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* — sizes — */
+.ui-select--lg {
+  min-height: 40px;
+  padding: var(--spacing-10) var(--spacing-xs) var(--spacing-10) var(--spacing-md);
+  gap: var(--spacing-sm);
+}
+.ui-select--lg .ui-select__left {
+  gap: var(--spacing-sm);
+}
+
+/* default size is the base — no extra rules needed */
+
+.ui-select--sm {
+  min-height: 32px;
+  padding: var(--spacing-6) var(--spacing-xs);
+  gap: var(--spacing-6);
+}
+.ui-select--sm .ui-select__left {
+  gap: var(--spacing-6);
+}
+
+.ui-select--mini {
+  min-height: 28px;
+  padding: var(--spacing-2xs) var(--spacing-6);
+  gap: var(--spacing-2xs);
+  border-radius: var(--rounded-lg);
+}
+.ui-select--mini .ui-select__left {
+  gap: var(--spacing-2xs);
+}
+.ui-select--mini .ui-select__value,
+.ui-select--mini .ui-select__prepend {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
+/* Dropdown — position/size set inline via JS (portal to body) */
+.ui-select__dropdown {
+  background: var(--input);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-10);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.ui-select__dropdown .ui-select__options::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-select__options {
+  overflow-y: auto;
+  padding: var(--spacing-2xs);
+}
+
+.ui-select__scroll-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--muted-fg);
+  background: var(--input);
+  padding: var(--spacing-2xs) 0;
+}
+
+.ui-select__scroll-indicator--up {
+  top: 0;
+}
+
+.ui-select__scroll-indicator--down {
+  bottom: 0;
+}