@liftkit-vue/core 0.2.0 → 0.2.1

package/src/components/LkSelect.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import type { InjectionKey, Ref } from 'vue'
+
+export interface LkSelectOption {
+  label: string
+  value: string
+}
+
+export interface LkSelectContext {
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  toggle: () => void
+  triggerRef: Ref<HTMLElement | null>
+  contentRef: Ref<HTMLDivElement | null>
+  selectedValue: Ref<string>
+  setSelectedValue: (value: string) => void
+  options: Ref<LkSelectOption[]>
+  name: string | undefined
+}
+
+export const SELECT_INJECTION_KEY: InjectionKey<LkSelectContext> = Symbol('liftkit-select')
+
+export interface LkSelectProps {
+  modelValue?: string
+  options?: LkSelectOption[]
+  name?: string
+  label?: string
+  labelPosition?: 'default' | 'on-input'
+  helpText?: string
+  placeholderText?: string
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, provide, onMounted, onBeforeUnmount } from 'vue'
+
+const props = withDefaults(defineProps<LkSelectProps>(), {
+  modelValue: '',
+  options: () => [],
+  labelPosition: 'default',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const open = ref(false)
+const triggerRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLDivElement | null>(null)
+const hiddenSelectRef = ref<HTMLSelectElement | null>(null)
+const selectedValue = ref(props.modelValue)
+
+// Sync with v-model
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedValue.value = newVal ?? ''
+  },
+)
+
+function setOpen(value: boolean) {
+  open.value = value
+}
+
+function toggle() {
+  setOpen(!open.value)
+}
+
+function setSelectedValue(value: string) {
+  selectedValue.value = value
+  emit('update:modelValue', value)
+  setOpen(false)
+}
+
+// Singleton registry for ensuring only one select open at a time
+let registryInstance: { close: () => void } | null = null
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    registryInstance = { close: () => setOpen(false) }
+    // Close other selects via a global event
+    window.dispatchEvent(new CustomEvent('lk-select-opened', { detail: registryInstance }))
+  }
+})
+
+function handleOtherSelectOpened(e: Event) {
+  const customEvent = e as CustomEvent
+  if (registryInstance && customEvent.detail !== registryInstance && open.value) {
+    setOpen(false)
+  }
+}
+
+// Click outside detection
+function handleClickOutside(e: MouseEvent) {
+  if (
+    contentRef.value &&
+    !contentRef.value.contains(e.target as Node) &&
+    triggerRef.value &&
+    !triggerRef.value.contains(e.target as Node)
+  ) {
+    setOpen(false)
+  }
+}
+
+// Keyboard navigation
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && open.value) {
+    setOpen(false)
+    triggerRef.value?.focus()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+  document.addEventListener('keydown', handleKeyDown)
+  window.addEventListener('lk-select-opened', handleOtherSelectOpened)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+  document.removeEventListener('keydown', handleKeyDown)
+  window.removeEventListener('lk-select-opened', handleOtherSelectOpened)
+})
+
+const optionsRef = computed(() => props.options)
+
+provide(SELECT_INJECTION_KEY, {
+  open,
+  setOpen,
+  toggle,
+  triggerRef,
+  contentRef,
+  selectedValue,
+  setSelectedValue,
+  options: optionsRef,
+  name: props.name,
+})
+</script>
+
+<template>
+  <div data-lk-component="select" v-bind="$attrs">
+    <!-- Hidden native select for form compatibility -->
+    <select
+      ref="hiddenSelectRef"
+      :name="name"
+      :value="selectedValue"
+      tabindex="-1"
+      aria-hidden="true"
+      style="position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+    >
+      <option value="" disabled />
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <slot
+      :is-open="open"
+      :toggle="toggle"
+      :selected-value="selectedValue"
+      :set-selected-value="setSelectedValue"
+    />
+  </div>
+</template>

package/src/components/LkSelectMenu.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, inject } from 'vue'
+import { SELECT_INJECTION_KEY, type LkSelectContext } from './LkSelect.vue'
+import LkCard from './LkCard.vue'
+
+export interface LkSelectMenuProps {
+  scaleFactor?: LkFontClass
+}
+
+const props = withDefaults(defineProps<LkSelectMenuProps>(), {
+  scaleFactor: 'body',
+})
+
+const ctx = inject<LkSelectContext>(SELECT_INJECTION_KEY)
+if (!ctx) {
+  throw new Error('LkSelectMenu must be used inside an LkSelect component')
+}
+
+const { open, triggerRef, contentRef } = ctx
+const localContentRef = ref<HTMLDivElement | null>(null)
+const positionStyle = ref<Record<string, string>>({})
+
+function calculatePosition() {
+  if (!triggerRef.value) return
+
+  const rect = triggerRef.value.getBoundingClientRect()
+  positionStyle.value = {
+    top: `${rect.bottom + window.scrollY}px`,
+    left: `${rect.left + window.scrollX}px`,
+  }
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    calculatePosition()
+  }
+})
+
+onMounted(() => {
+  if (localContentRef.value) {
+    contentRef.value = localContentRef.value
+  }
+})
+
+onBeforeUnmount(() => {
+  contentRef.value = null
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open && triggerRef"
+      ref="localContentRef"
+      :style="positionStyle"
+      role="menu"
+      data-lk-component="select-menu"
+      :data-isactive="open"
+    >
+      <LkCard class="shadow-xl" :scale-factor="scaleFactor">
+        <div data-lk-component="column" data-lk-column-gap="none" :class="scaleFactor">
+          <slot />
+        </div>
+      </LkCard>
+    </div>
+  </Teleport>
+</template>

package/src/components/LkSelectOption.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { SELECT_INJECTION_KEY, type LkSelectContext } from './LkSelect.vue'
+
+export interface LkSelectOptionProps {
+  value: string
+}
+
+const props = defineProps<LkSelectOptionProps>()
+
+const ctx = inject<LkSelectContext>(SELECT_INJECTION_KEY)
+if (!ctx) {
+  throw new Error('LkSelectOption must be used inside an LkSelect component')
+}
+
+const { selectedValue, setSelectedValue } = ctx
+
+const isSelected = computed(() => selectedValue.value === props.value)
+
+function handleClick() {
+  setSelectedValue(props.value)
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    handleClick()
+  }
+}
+</script>
+
+<template>
+  <div
+    role="menuitem"
+    data-lk-component="menu-item"
+    :tabindex="0"
+    :data-selected="isSelected"
+    :style="{
+      cursor: 'pointer',
+      fontWeight: isSelected ? 'bold' : 'normal',
+    }"
+    class="select-option"
+    @click="handleClick"
+    @keydown="handleKeyDown"
+  >
+    <slot name="startIcon" />
+    <p data-lk-menu-item-element="content-wrap">
+      <slot />
+    </p>
+    <slot name="endIcon" />
+    <div
+      data-lk-component="state-layer"
+      :data-lk-state-layer-forced-state="isSelected ? 'active' : undefined"
+    />
+  </div>
+</template>

package/src/components/LkSelectTrigger.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { inject, ref, onMounted, onBeforeUnmount } from 'vue'
+import { SELECT_INJECTION_KEY, type LkSelectContext } from './LkSelect.vue'
+
+const ctx = inject<LkSelectContext>(SELECT_INJECTION_KEY)
+if (!ctx) {
+  throw new Error('LkSelectTrigger must be used inside an LkSelect component')
+}
+
+const { open, toggle, triggerRef } = ctx
+const localRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  if (localRef.value) {
+    const firstChild = localRef.value.firstElementChild as HTMLElement | null
+    if (firstChild) {
+      triggerRef.value = firstChild
+    } else {
+      triggerRef.value = localRef.value
+    }
+  }
+})
+
+onBeforeUnmount(() => {
+  triggerRef.value = null
+})
+
+function handleClick() {
+  toggle()
+}
+</script>
+
+<template>
+  <div
+    ref="localRef"
+    data-lk-component="select-trigger"
+    :aria-expanded="open"
+    aria-haspopup="menu"
+    @click="handleClick"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/LkSnackbar.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted, useAttrs } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+import { getOnToken } from '../utils/colorUtils'
+import LkCard from './LkCard.vue'
+
+export interface LkSnackbarProps {
+  globalColor?: LkColorWithOnToken
+  message?: string
+  modelValue?: boolean
+  autoDismiss?: number
+}
+
+const props = withDefaults(defineProps<LkSnackbarProps>(), {
+  message: 'Notification text goes here.',
+  modelValue: true,
+  autoDismiss: 0,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+const isVisible = ref(props.modelValue)
+let dismissTimer: ReturnType<typeof setTimeout> | null = null
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    isVisible.value = newVal
+    if (newVal && props.autoDismiss > 0) {
+      startDismissTimer()
+    }
+  },
+)
+
+function startDismissTimer() {
+  clearDismissTimer()
+  if (props.autoDismiss > 0) {
+    dismissTimer = setTimeout(() => {
+      isVisible.value = false
+      emit('update:modelValue', false)
+    }, props.autoDismiss)
+  }
+}
+
+function clearDismissTimer() {
+  if (dismissTimer) {
+    clearTimeout(dismissTimer)
+    dismissTimer = null
+  }
+}
+
+onMounted(() => {
+  if (isVisible.value && props.autoDismiss > 0) {
+    startDismissTimer()
+  }
+})
+
+onUnmounted(() => {
+  clearDismissTimer()
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      globalColor: props.globalColor,
+      message: props.message,
+    },
+    'snackbar',
+  ),
+)
+
+const onColorToken = computed(() => {
+  if (!props.globalColor) return undefined
+  return getOnToken(props.globalColor as LkColor)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isVisible"
+      data-lk-component="snackbar"
+      v-bind="{ ...dataAttrs, ...attrs }"
+    >
+      <LkCard
+        :scale-factor="$slots.icon ? 'subheading' : 'body'"
+        :bg-color="globalColor"
+        :optical-correction="$slots.icon ? 'none' : 'y'"
+        class="shadow-sm"
+      >
+        <div data-lk-component="row" data-lk-row-align-items="center">
+          <!-- Icon slot -->
+          <div v-if="$slots.icon" data-lk-slot="snackbar-icon">
+            <slot name="icon" :on-color="onColorToken" />
+          </div>
+
+          <!-- Message / default content slot -->
+          <div data-lk-slot="snackbar-text">
+            <slot :on-color="onColorToken" :global-color="globalColor">
+              <p>{{ message }}</p>
+            </slot>
+          </div>
+
+          <div data-lk-component="row">
+            <!-- Action buttons slot -->
+            <div v-if="$slots.action" data-lk-slot="snackbar-actions">
+              <slot name="action" :on-color="onColorToken" :global-color="globalColor" />
+            </div>
+
+            <!-- Icon action buttons (dismiss etc.) slot -->
+            <div v-if="$slots.iconAction" data-lk-slot="snackbar-icon-actions">
+              <slot name="iconAction" :on-color="onColorToken" :global-color="globalColor" />
+            </div>
+          </div>
+        </div>
+      </LkCard>
+    </div>
+  </Teleport>
+</template>

package/src/components/LkStateLayer.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface LkStateLayerProps {
+  bgColor?: LkColor | 'currentColor'
+  forcedState?: 'hover' | 'active' | 'focus'
+}
+
+const props = withDefaults(defineProps<LkStateLayerProps>(), {
+  bgColor: 'currentColor',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const layerClass = computed(() =>
+  props.bgColor !== 'currentColor' ? `bg-${props.bgColor}` : '',
+)
+
+const layerStyle = computed(() =>
+  props.bgColor === 'currentColor' ? { backgroundColor: 'currentColor' } : {},
+)
+</script>
+
+<template>
+  <div
+    data-lk-component="state-layer"
+    :class="layerClass"
+    :style="layerStyle"
+    v-bind="props.forcedState ? { 'data-lk-forced-state': props.forcedState } : {}"
+  ></div>
+</template>

package/src/components/LkSticker.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getOnToken } from '../utils/colorUtils'
+
+interface LkStickerProps {
+  fontClass?: LkFontClass
+  bgColor?: LkColor
+  class?: string
+}
+
+const props = withDefaults(defineProps<LkStickerProps>(), {
+  fontClass: 'label',
+  bgColor: 'primarycontainer',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const onColor = computed(() => getOnToken(props.bgColor))
+
+const stickerClass = computed(() => {
+  const classes: string[] = [
+    `bg-${props.bgColor}`,
+    `color-${onColor.value}`,
+  ]
+  if (props.class) classes.push(props.class)
+  return classes.join(' ')
+})
+</script>
+
+<template>
+  <div
+    data-lk-component="sticker"
+    :class="stickerClass"
+    v-bind="$attrs"
+  >
+    <LkText :font-class="props.fontClass">
+      <slot>Sticker</slot>
+    </LkText>
+  </div>
+</template>

package/src/components/LkSwitch.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getOnToken } from '../utils/colorUtils'
+
+export interface LkSwitchProps {
+  modelValue?: boolean
+  offColor?: LkColorWithOnToken
+  onColor?: LkColorWithOnToken
+}
+
+const props = withDefaults(defineProps<LkSwitchProps>(), {
+  modelValue: false,
+  offColor: 'surfacevariant',
+  onColor: 'primary',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const switchThumbOffColor = computed(() => getOnToken(props.offColor))
+const switchThumbOnColor = computed(() => getOnToken(props.onColor))
+
+function handleClick() {
+  emit('update:modelValue', !props.modelValue)
+}
+
+const switchState = computed(() => (props.modelValue ? 'on' : 'off'))
+
+const switchStyles = computed(() => ({
+  '--switch-off-color': `var(--lk-${props.offColor})`,
+  '--switch-on-color': `var(--lk-${props.onColor})`,
+  '--switch-thumb-off-color': `var(--lk-${switchThumbOffColor.value})`,
+  '--switch-thumb-on-color': `var(--lk-${switchThumbOnColor.value})`,
+}))
+</script>
+
+<template>
+  <div
+    data-lk-component="switch"
+    v-bind="{ ...$attrs, style: switchStyles }"
+    :data-lk-switch-state="switchState"
+    @click="handleClick"
+  >
+    <div
+      data-lk-component="switch-thumb"
+      :data-lk-switch-state="switchState"
+    />
+  </div>
+</template>
+
+<style scoped>
+[data-lk-component="switch"] {
+  position: relative;
+  display: block;
+  align-items: center;
+  justify-content: start;
+  width: var(--lk-size-xl);
+  height: calc(var(--lk-size-md) + calc(var(--lk-size-2xs) * 2));
+  background-color: var(--switch-off-color);
+  border-radius: 100em;
+  cursor: pointer;
+}
+
+[data-lk-component="switch"][data-lk-switch-state="on"] {
+  background-color: var(--switch-on-color);
+}
+
+[data-lk-component="switch-thumb"] {
+  position: absolute;
+  top: 50%;
+  left: var(--lk-size-2xs);
+  right: auto;
+  width: var(--lk-size-md);
+  height: var(--lk-size-md);
+  border-radius: 50%;
+  background-color: var(--switch-thumb-off-color);
+  transform: translateY(-50%);
+  transition: left 0.1s ease-out;
+}
+
+[data-lk-component="switch-thumb"][data-lk-switch-state="on"] {
+  left: calc(100% - calc(var(--lk-size-md) + var(--lk-size-2xs)));
+  background-color: var(--switch-thumb-on-color);
+}
+</style>

package/src/components/LkTabContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { Ref } from 'vue'
+
+export interface LkTabContentProps {
+  index: number
+}
+
+const props = defineProps<LkTabContentProps>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const tabsContext = inject<{ activeTab: Ref<number> } | null>('lk-tabs', null)
+
+const isVisible = computed(() => {
+  if (tabsContext) {
+    return tabsContext.activeTab.value === props.index
+  }
+  return true
+})
+</script>
+
+<template>
+  <div
+    v-show="isVisible"
+    data-lk-component="tab-content"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>