webcake-ui-kit 1.0.0 → 1.0.2

package/src/components/slider/Slider.vue

@@ -0,0 +1,255 @@
+<template>
+  <div
+    class="ui-slider"
+    :class="{
+      'ui-slider--vertical': orientation === 'vertical',
+      'ui-slider--disabled': disabled,
+      'ui-slider--range': range
+    }"
+  >
+    <div class="ui-slider__track" ref="track" @click="onTrackClick">
+      <div class="ui-slider__fill" :style="fillStyle" />
+      <div
+        v-if="!range"
+        class="ui-slider__thumb"
+        role="slider"
+        tabindex="0"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+        :aria-valuenow="localValue"
+        :aria-orientation="orientation"
+        :style="thumbStyle(localValue)"
+        @mousedown.prevent="startDrag('single', $event)"
+        @touchstart.prevent="startDragTouch('single', $event)"
+        @keydown="onKeydown('single', $event)"
+        @click.stop
+      />
+      <template v-if="range">
+        <div
+          class="ui-slider__thumb"
+          role="slider"
+          tabindex="0"
+          :aria-valuemin="min"
+          :aria-valuemax="localRangeMax"
+          :aria-valuenow="localRangeMin"
+          :aria-orientation="orientation"
+          :style="thumbStyle(localRangeMin)"
+          @mousedown.prevent="startDrag('min', $event)"
+          @touchstart.prevent="startDragTouch('min', $event)"
+          @keydown="onKeydown('min', $event)"
+          @click.stop
+        />
+        <div
+          class="ui-slider__thumb"
+          role="slider"
+          tabindex="0"
+          :aria-valuemin="localRangeMin"
+          :aria-valuemax="max"
+          :aria-valuenow="localRangeMax"
+          :aria-orientation="orientation"
+          :style="thumbStyle(localRangeMax)"
+          @mousedown.prevent="startDrag('max', $event)"
+          @touchstart.prevent="startDragTouch('max', $event)"
+          @keydown="onKeydown('max', $event)"
+          @click.stop
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Slider',
+  props: {
+    value: { type: Number, default: 50 },
+    rangeValue: {
+      type: Array,
+      default: function () {
+        return [25, 75]
+      }
+    },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    range: { type: Boolean, default: false },
+    orientation: {
+      type: String,
+      default: 'horizontal',
+      validator: function (v) {
+        return ['horizontal', 'vertical'].indexOf(v) !== -1
+      }
+    },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ['change', 'input'],
+  data: function () {
+    return {
+      localValue: this.value,
+      localRangeMin: Array.isArray(this.rangeValue) ? this.rangeValue[0] : 25,
+      localRangeMax: Array.isArray(this.rangeValue) ? this.rangeValue[1] : 75,
+      dragging: null,
+      boundMouseMove: null,
+      boundMouseUp: null,
+      boundTouchMove: null,
+      boundTouchEnd: null
+    }
+  },
+  watch: {
+    value: function (v) {
+      this.localValue = v
+    },
+    rangeValue: function (v) {
+      if (Array.isArray(v)) {
+        this.localRangeMin = v[0]
+        this.localRangeMax = v[1]
+      }
+    }
+  },
+  computed: {
+    fillStyle: function () {
+      var minPct = (this.localRangeMin - this.min) / (this.max - this.min)
+      var maxPct = (this.localRangeMax - this.min) / (this.max - this.min)
+      var valPct = (this.localValue - this.min) / (this.max - this.min)
+      if (this.orientation === 'vertical') {
+        if (this.range) {
+          return { bottom: minPct * 100 + '%', height: (maxPct - minPct) * 100 + '%' }
+        }
+        return { bottom: '0%', height: valPct * 100 + '%' }
+      }
+      if (this.range) {
+        return { left: minPct * 100 + '%', width: (maxPct - minPct) * 100 + '%' }
+      }
+      return { left: '0%', width: valPct * 100 + '%' }
+    }
+  },
+  created: function () {
+    this.boundMouseMove = this.onMouseMove.bind(this)
+    this.boundMouseUp = this.stopDrag.bind(this)
+    this.boundTouchMove = this.onTouchMove.bind(this)
+    this.boundTouchEnd = this.stopDrag.bind(this)
+  },
+  beforeUnmount: function () {
+    this.cleanup()
+  },
+  methods: {
+    cleanup: function () {
+      document.removeEventListener('mousemove', this.boundMouseMove)
+      document.removeEventListener('mouseup', this.boundMouseUp)
+      document.removeEventListener('touchmove', this.boundTouchMove)
+      document.removeEventListener('touchend', this.boundTouchEnd)
+    },
+    thumbStyle: function (val) {
+      var p = (val - this.min) / (this.max - this.min)
+      if (this.orientation === 'vertical') {
+        return { bottom: p * 100 + '%' }
+      }
+      return { left: p * 100 + '%' }
+    },
+    snap: function (val) {
+      var stepped = Math.round((val - this.min) / this.step) * this.step + this.min
+      return Math.max(this.min, Math.min(this.max, parseFloat(stepped.toFixed(10))))
+    },
+    valueFromPointer: function (clientX, clientY) {
+      var rect = this.$refs.track.getBoundingClientRect()
+      var ratio
+      if (this.orientation === 'vertical') {
+        ratio = 1 - (clientY - rect.top) / rect.height
+      } else {
+        ratio = (clientX - rect.left) / rect.width
+      }
+      ratio = Math.max(0, Math.min(1, ratio))
+      return this.snap(this.min + ratio * (this.max - this.min))
+    },
+    startDrag: function (which) {
+      if (this.disabled) return
+      this.dragging = which
+      document.addEventListener('mousemove', this.boundMouseMove)
+      document.addEventListener('mouseup', this.boundMouseUp)
+    },
+    startDragTouch: function (which) {
+      if (this.disabled) return
+      this.dragging = which
+      document.addEventListener('touchmove', this.boundTouchMove, { passive: false })
+      document.addEventListener('touchend', this.boundTouchEnd)
+    },
+    onMouseMove: function (event) {
+      if (!this.dragging) return
+      this.applyValue(this.dragging, this.valueFromPointer(event.clientX, event.clientY))
+    },
+    onTouchMove: function (event) {
+      if (!this.dragging) return
+      event.preventDefault()
+      var t = event.touches[0]
+      this.applyValue(this.dragging, this.valueFromPointer(t.clientX, t.clientY))
+    },
+    stopDrag: function () {
+      this.dragging = null
+      document.removeEventListener('mousemove', this.boundMouseMove)
+      document.removeEventListener('mouseup', this.boundMouseUp)
+      document.removeEventListener('touchmove', this.boundTouchMove)
+      document.removeEventListener('touchend', this.boundTouchEnd)
+    },
+    applyValue: function (which, val) {
+      if (which === 'single') {
+        this.localValue = val
+        this.$emit('input', val)
+        this.$emit('change', val)
+      } else if (which === 'min') {
+        var newMin = Math.min(val, this.localRangeMax - this.step)
+        this.localRangeMin = this.snap(newMin)
+        this.$emit('change', [this.localRangeMin, this.localRangeMax])
+      } else if (which === 'max') {
+        var newMax = Math.max(val, this.localRangeMin + this.step)
+        this.localRangeMax = this.snap(newMax)
+        this.$emit('change', [this.localRangeMin, this.localRangeMax])
+      }
+    },
+    onTrackClick: function (event) {
+      if (this.disabled) return
+      var val = this.valueFromPointer(event.clientX, event.clientY)
+      if (!this.range) {
+        this.applyValue('single', val)
+        return
+      }
+      var distMin = Math.abs(val - this.localRangeMin)
+      var distMax = Math.abs(val - this.localRangeMax)
+      this.applyValue(distMin <= distMax ? 'min' : 'max', val)
+    },
+    onKeydown: function (which, event) {
+      if (this.disabled) return
+      var key = event.key
+      var isIncrease = key === 'ArrowRight' || key === 'ArrowUp'
+      var isDecrease = key === 'ArrowLeft' || key === 'ArrowDown'
+      var isHome = key === 'Home'
+      var isEnd = key === 'End'
+      if (!isIncrease && !isDecrease && !isHome && !isEnd) return
+      event.preventDefault()
+      var current, newVal
+      if (which === 'single') {
+        current = this.localValue
+        newVal = isHome ? this.min : isEnd ? this.max : current + (isIncrease ? this.step : -this.step)
+        this.applyValue('single', this.snap(newVal))
+      } else if (which === 'min') {
+        current = this.localRangeMin
+        newVal = isHome
+          ? this.min
+          : isEnd
+            ? this.localRangeMax - this.step
+            : current + (isIncrease ? this.step : -this.step)
+        this.applyValue('min', this.snap(newVal))
+      } else if (which === 'max') {
+        current = this.localRangeMax
+        newVal = isHome
+          ? this.localRangeMin + this.step
+          : isEnd
+            ? this.max
+            : current + (isIncrease ? this.step : -this.step)
+        this.applyValue('max', this.snap(newVal))
+      }
+    }
+  }
+}
+</script>
+
+<style src="./slider.css" scoped></style>

package/src/components/slider/slider.css

@@ -0,0 +1,89 @@
+.ui-slider {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 120px;
+  padding: var(--spacing-xs) 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ui-slider--vertical {
+  flex-direction: column;
+  width: auto;
+  min-width: unset;
+  min-height: 120px;
+  height: 100%;
+  padding: 0 var(--spacing-xs);
+}
+
+.ui-slider--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.ui-slider__track {
+  position: relative;
+  flex: 1;
+  height: 6px;
+  background: var(--tertiary-bg);
+  border-radius: var(--radius-infinite);
+  cursor: pointer;
+}
+
+.ui-slider--vertical .ui-slider__track {
+  flex: 1;
+  width: 6px;
+  height: auto;
+}
+
+.ui-slider__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--primary-brand-bg);
+  border-radius: var(--radius-infinite);
+  pointer-events: none;
+}
+
+.ui-slider--vertical .ui-slider__fill {
+  top: auto;
+  left: 0;
+  right: 0;
+}
+
+.ui-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--primary-brand-bg);
+  border: 1.5px solid var(--inverse-fg);
+  border-radius: var(--radius-infinite);
+  box-shadow: var(--shadow-xs);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  outline: none;
+  z-index: 1;
+  transition: box-shadow 0.1s ease;
+}
+
+.ui-slider--vertical .ui-slider__thumb {
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.ui-slider__thumb:hover {
+  box-shadow:
+    var(--shadow-xs),
+    0 0 0 5px color-mix(in srgb, var(--primary-brand-bg) 20%, transparent);
+}
+
+.ui-slider__thumb:focus-visible {
+  box-shadow: var(--shadow-xs), var(--shadow-focus-ring);
+}
+
+.ui-slider__thumb:active {
+  cursor: grabbing;
+}

package/src/components/spinner/Spinner.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="ui-spinner" :class="[`ui-spinner--${size}`, `ui-spinner--${type}`]" role="status" :aria-label="label">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-loader-circle-icon lucide-loader-circle ui-spinner__svg"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Spinner',
+  props: {
+    size: {
+      type: String,
+      default: 'sm',
+      validator: function (v) {
+        return ['sm', 'md', 'lg'].indexOf(v) !== -1
+      }
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator: function (v) {
+        return ['default', 'mirrored'].indexOf(v) !== -1
+      }
+    },
+    label: {
+      type: String,
+      default: 'Loading'
+    }
+  },
+  emits: []
+}
+</script>
+
+<style src="./spinner.css" scoped></style>

package/src/components/spinner/spinner.css

@@ -0,0 +1,48 @@
+.ui-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ui-spinner--sm {
+  width: 16px;
+  height: 16px;
+}
+
+.ui-spinner--md {
+  width: 24px;
+  height: 24px;
+}
+
+.ui-spinner--lg {
+  width: 32px;
+  height: 32px;
+}
+
+.ui-spinner__svg {
+  width: 100%;
+  height: 100%;
+  animation: ui-spinner-spin 0.7s linear infinite;
+}
+
+.ui-spinner--mirrored .ui-spinner__svg {
+  animation-direction: reverse;
+}
+
+.ui-spinner__track {
+  stroke: var(--tertiary-bg);
+}
+
+.ui-spinner__arc {
+  stroke: currentColor;
+}
+
+@keyframes ui-spinner-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/switch/Switch.vue

@@ -0,0 +1,32 @@
+<template>
+  <button
+    class="ui-switch"
+    :class="{ 'ui-switch--on': value }"
+    role="switch"
+    type="button"
+    :aria-checked="value ? 'true' : 'false'"
+    :disabled="disabled || undefined"
+    @click="toggle"
+  >
+    <span class="ui-switch__thumb" />
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ['change', 'input'],
+  methods: {
+    toggle: function () {
+      var next = !this.value
+      this.$emit('input', next)
+      this.$emit('change', next)
+    }
+  }
+}
+</script>
+
+<style src="./switch.css" scoped></style>

package/src/components/switch/switch.css

@@ -0,0 +1,46 @@
+.ui-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 33px;
+  height: 18px;
+  border-radius: var(--radius-infinite);
+  background: var(--border-primary);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  box-shadow: var(--shadow-xs);
+  outline: none;
+}
+
+.ui-switch--on {
+  background: var(--primary-brand-bg);
+}
+
+.ui-switch:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ui-switch:focus-visible {
+  box-shadow: var(--shadow-xs), var(--shadow-focus-ring);
+}
+
+.ui-switch__thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--inverse-fg);
+  box-shadow: var(--shadow-xs);
+  transition: transform 0.15s ease;
+  pointer-events: none;
+}
+
+.ui-switch--on .ui-switch__thumb {
+  transform: translateX(15px);
+}

package/src/components/switch-group/SwitchGroup.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="ui-switch-group" :class="[`ui-switch-group--${layout}`, { 'ui-switch-group--disabled': disabled }]">
+    <WkSwitch :value="value" :disabled="disabled" @change="$emit('change', $event)" @input="$emit('input', $event)" />
+    <span class="ui-switch-group__label"
+      ><slot>{{ label }}</slot></span
+    >
+  </div>
+</template>
+
+<script>
+import WkSwitch from '../switch/Switch.vue'
+
+export default {
+  name: 'SwitchGroup',
+  components: { WkSwitch },
+  props: {
+    value: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    layout: {
+      type: String,
+      default: 'inline',
+      validator: function (v) {
+        return ['inline', 'block'].indexOf(v) !== -1
+      }
+    },
+    label: { type: String, default: '' }
+  },
+  emits: ['change', 'input']
+}
+</script>
+
+<style src="./switch_group.css" scoped></style>

package/src/components/switch-group/switch_group.css

@@ -0,0 +1,28 @@
+.ui-switch-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  cursor: pointer;
+}
+
+.ui-switch-group--block {
+  display: flex;
+  width: 100%;
+}
+
+.ui-switch-group--block .ui-switch-group__label {
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-switch-group--disabled {
+  cursor: not-allowed;
+}
+
+.ui-switch-group__label {
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--secondary-fg);
+  user-select: none;
+}

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ui-tabs" :class="`ui-tabs--${size}`">
+    <button
+      v-for="tab in tabs"
+      :key="tab.value"
+      type="button"
+      class="ui-tabs__item"
+      :class="{
+        'ui-tabs__item--active': tab.value === value,
+        'ui-tabs__item--disabled': tab.disabled
+      }"
+      :disabled="tab.disabled || undefined"
+      @click="select(tab.value)"
+    >
+      <span v-if="hasIconSlot" class="ui-tabs__icon"><slot name="tab-icon" :tab="tab" /></span>
+      <span v-if="tab.label" class="ui-tabs__label">{{ tab.label }}</span>
+      <span v-if="tab.counter > 0" class="ui-tabs__counter">{{ tab.counter }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tabs',
+  props: {
+    value: { type: [String, Number], default: null },
+    tabs: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator: function (v) {
+        return ['mini', 'sm', 'md', 'lg'].includes(v)
+      }
+    }
+  },
+  emits: ['input', 'change'],
+  computed: {
+    hasIconSlot: function () {
+      return !!((this.$scopedSlots && this.$scopedSlots['tab-icon']) || this.$slots['tab-icon'])
+    }
+  },
+  methods: {
+    select: function (val) {
+      if (val === this.value) return
+      this.$emit('input', val)
+      this.$emit('change', val)
+    }
+  }
+}
+</script>
+
+<style src="./tabs.css" scoped></style>