@liftkit-vue/core 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liftkit-vue/core",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Material Design 3 inspired Vue 3 component library with dynamic theming and golden-ratio design tokens",
   "type": "module",
   "license": "MIT",
@@ -36,7 +36,8 @@
   },
   "files": [
     "dist",
-    "src/css"
+    "src/css",
+    "src/components"
   ],
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",

package/src/components/LkBadge.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getOnToken } from '../utils/colorUtils'
+
+interface LkBadgeProps {
+  icon?: string
+  color?: LkColorWithOnToken
+  scale?: 'md' | 'lg'
+  iconStrokeWidth?: number
+  scrim?: boolean
+}
+
+const props = withDefaults(defineProps<LkBadgeProps>(), {
+  icon: 'roller-coaster',
+  color: 'surface',
+  scale: 'md',
+  iconStrokeWidth: 0,
+  scrim: false,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const iconColor = computed(() => getOnToken(props.color) as LkColor)
+
+const defaultIconStrokeWidth = computed(() => {
+  switch (props.scale) {
+    case 'lg':
+      return 1
+    case 'md':
+    default:
+      return 1.5
+  }
+})
+
+const resolvedStrokeWidth = computed(() =>
+  props.iconStrokeWidth || defaultIconStrokeWidth.value,
+)
+</script>
+
+<template>
+  <div
+    data-lk-component="badge"
+    :data-lk-badge-scale="props.scale"
+    :data-lk-badge-color="`lk-${props.color}`"
+    v-bind="$attrs"
+  >
+    <div data-lk-component="slot" data-lk-slot="icon">
+      <div data-lk-icon-element="wrapper">
+        <LkIcon
+          :name="props.icon"
+          :color="iconColor"
+          :stroke-width="resolvedStrokeWidth"
+        />
+      </div>
+    </div>
+    <div
+      v-if="props.scrim"
+      data-lk-component="badge-scrim"
+      :class="`bg-${iconColor}`"
+    ></div>
+  </div>
+</template>

package/src/components/LkButton.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+import { getOnToken } from '../utils/colorUtils'
+import LkStateLayer from './LkStateLayer.vue'
+import LkIcon from './LkIcon.vue'
+import type { LkStateLayerProps } from './LkStateLayer.vue'
+
+export interface LkButtonProps {
+  label?: string
+  variant?: 'fill' | 'outline' | 'text'
+  color?: LkColorWithOnToken
+  size?: 'sm' | 'md' | 'lg'
+  material?: string
+  startIcon?: string
+  endIcon?: string
+  opticIconShift?: boolean
+  modifiers?: string
+  stateLayerOverride?: LkStateLayerProps
+}
+
+const props = withDefaults(defineProps<LkButtonProps>(), {
+  label: 'Button',
+  variant: 'fill',
+  color: 'primary',
+  size: 'md',
+  opticIconShift: true,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const lkButtonAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      variant: props.variant,
+      color: props.color,
+      size: props.size,
+      startIcon: props.startIcon,
+      endIcon: props.endIcon,
+      opticIconShift: props.opticIconShift,
+    },
+    'button',
+  ),
+)
+
+const onColorToken = computed(() => getOnToken(props.color) as LkColor)
+
+const baseButtonClasses = computed(() => {
+  let classes = ''
+  switch (props.variant) {
+    case 'fill':
+      classes = `bg-${props.color} color-${onColorToken.value}`
+      break
+    case 'outline':
+    case 'text':
+      classes = `color-${props.color}`
+      break
+    default:
+      classes = `bg-${props.color} color-${onColorToken.value}`
+      break
+  }
+  if (props.modifiers) {
+    classes += ` ${props.modifiers}`
+  }
+  return classes
+})
+
+const localStateLayerProps = computed(() => {
+  if (props.stateLayerOverride) {
+    return props.stateLayerOverride
+  }
+  return {
+    bgColor: props.variant === 'fill' ? onColorToken.value : props.color,
+  }
+})
+
+const iconColor = computed(() =>
+  props.variant === 'fill' ? onColorToken.value : props.color,
+)
+</script>
+
+<template>
+  <button
+    v-bind="{ ...$attrs, ...lkButtonAttrs }"
+    type="button"
+    data-lk-component="button"
+    :class="`${baseButtonClasses} ${modifiers || ''}`"
+  >
+    <div data-lk-button-content-wrap="true">
+      <div v-if="startIcon" data-lk-icon-position="start">
+        <LkIcon :name="startIcon" :color="iconColor" data-lk-icon-position="start" />
+      </div>
+      <span data-lk-button-child="button-text">{{ label ?? 'Button' }}</span>
+      <div v-if="endIcon" data-lk-icon-position="end">
+        <LkIcon :name="endIcon" :color="iconColor" data-lk-icon-position="end" />
+      </div>
+    </div>
+    <LkStateLayer v-bind="localStateLayerProps" />
+  </button>
+</template>

package/src/components/LkCard.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+export interface LkCardProps {
+  scaleFactor?: LkFontClass | 'none'
+  variant?: 'fill' | 'outline' | 'transparent'
+  material?: 'flat' | 'glass'
+  materialProps?: LkMatProps
+  opticalCorrection?: 'top' | 'left' | 'right' | 'bottom' | 'x' | 'y' | 'all' | 'none'
+  isClickable?: boolean
+  bgColor?: LkColorWithOnToken | 'transparent'
+  isScrollable?: boolean
+}
+
+const props = withDefaults(defineProps<LkCardProps>(), {
+  scaleFactor: 'body',
+  variant: 'fill',
+  material: 'flat',
+  materialProps: () => ({}),
+  opticalCorrection: 'none',
+  isClickable: false,
+  isScrollable: false,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+const lkCardAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      scaleFactor: props.scaleFactor,
+      variant: props.variant,
+      material: props.material,
+    },
+    'card',
+  ),
+)
+
+const rootClass = computed(() => {
+  const classes: string[] = []
+  if (props.isClickable) classes.push('clickable')
+  return classes.join(' ')
+})
+
+const materialBgColor = computed(() => {
+  if (props.variant === 'fill') return props.bgColor
+  return 'transparent'
+})
+</script>
+
+<template>
+  <div
+    data-lk-component="card"
+    :class="rootClass"
+    v-bind="{ ...lkCardAttrs, ...attrs }"
+  >
+    <div
+      data-lk-card-element="padding-box"
+      :class="isScrollable ? 'overflow-auto' : ''"
+      :data-lk-card-optical-correction="opticalCorrection"
+    >
+      <div data-lk-component="slot" data-lk-slot="children">
+        <slot />
+      </div>
+    </div>
+    <!-- Glass material layer -->
+    <div
+      v-if="material === 'glass'"
+      data-lk-component="material-layer"
+      data-lk-material-layer-type="glass"
+      v-bind="propsToDataAttrs(materialProps as Record<string, unknown>, 'material')"
+    />
+    <!-- Flat material layer -->
+    <div
+      v-if="material === 'flat'"
+      data-lk-component="material-layer"
+      data-lk-material-layer-type="flat"
+      :data-lk-material-bg-color="materialBgColor"
+    />
+  </div>
+</template>

package/src/components/LkColumn.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+interface LkColumnProps {
+  alignItems?: 'start' | 'center' | 'end' | 'stretch'
+  justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around'
+  gap?: LkSizeUnit | 'none'
+  wrapChildren?: boolean
+  defaultChildBehavior?: 'auto-grow' | 'auto-shrink' | 'ignoreFlexRules' | 'ignoreIntrinsicSize'
+}
+
+const props = withDefaults(defineProps<LkColumnProps>(), {
+  alignItems: 'stretch',
+  justifyContent: 'start',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      alignItems: props.alignItems,
+      justifyContent: props.justifyContent,
+      gap: props.gap,
+      wrapChildren: props.wrapChildren,
+      defaultChildBehavior: props.defaultChildBehavior,
+    },
+    'column',
+  ),
+)
+</script>
+
+<template>
+  <div v-bind="{ ...$attrs, ...dataAttrs }" data-lk-component="column">
+    <slot />
+  </div>
+</template>

package/src/components/LkContainer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+interface LkContainerProps {
+  maxWidth?: LkContainerWidth
+}
+
+const props = withDefaults(defineProps<LkContainerProps>(), {
+  maxWidth: 'md',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs({ maxWidth: props.maxWidth }, 'container'),
+)
+</script>
+
+<template>
+  <div v-bind="{ ...$attrs, ...dataAttrs }">
+    <slot />
+  </div>
+</template>

package/src/components/LkDropdown/LkDropdown.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { provideDropdown } from '../../composables'
+
+const { open, toggle, setOpen } = provideDropdown()
+</script>
+
+<template>
+  <div
+    data-lk-component="dropdown"
+    v-bind="$attrs"
+  >
+    <slot :is-open="open" :toggle="toggle" :close="() => setOpen(false)" />
+  </div>
+</template>

package/src/components/LkDropdown/LkDropdownMenu.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useDropdown } from '../../composables'
+import LkCard from '../LkCard.vue'
+
+export interface LkDropdownMenuProps {
+  scaleFactor?: LkFontClass
+}
+
+const props = withDefaults(defineProps<LkDropdownMenuProps>(), {
+  scaleFactor: 'body',
+})
+
+const { open, triggerRef, contentRef } = useDropdown()
+const localContentRef = ref<HTMLDivElement | null>(null)
+const positionStyle = ref<Record<string, string>>({})
+const triggerQuadrant = ref<string>('bottom-left')
+
+function calculatePosition() {
+  if (!triggerRef.value) return
+
+  const rect = triggerRef.value.getBoundingClientRect()
+  const windowWidth = window.innerWidth
+  const windowHeight = window.innerHeight
+
+  const isTop = rect.top < windowHeight / 2
+  const isLeft = rect.left < windowWidth / 2
+
+  if (isTop) {
+    triggerQuadrant.value = isLeft ? 'bottom-left' : 'bottom-right'
+  } else {
+    triggerQuadrant.value = isLeft ? 'top-left' : 'top-right'
+  }
+
+  switch (triggerQuadrant.value) {
+    case 'top-left':
+      positionStyle.value = {
+        top: `${rect.top + window.scrollY}px`,
+        left: `${rect.left + window.scrollX}px`,
+      }
+      break
+    case 'top-right':
+      positionStyle.value = {
+        top: `${rect.top + window.scrollY}px`,
+        left: `${rect.right + window.scrollX}px`,
+      }
+      break
+    case 'bottom-right':
+      positionStyle.value = {
+        top: `${rect.bottom + window.scrollY}px`,
+        left: `${rect.right + window.scrollX}px`,
+      }
+      break
+    case 'bottom-left':
+    default:
+      positionStyle.value = {
+        top: `${rect.bottom + window.scrollY}px`,
+        left: `${rect.left + window.scrollX}px`,
+      }
+      break
+  }
+}
+
+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="dropdown-menu"
+      :data-isactive="open"
+      :data-lk-dropdown-trigger-quadrant="triggerQuadrant"
+    >
+      <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/LkDropdown/LkDropdownTrigger.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useDropdown } from '../../composables'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const { open, toggle, triggerRef } = useDropdown()
+const localRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  // Assign the first child element as the trigger ref
+  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="dropdown-trigger"
+    :aria-expanded="open"
+    aria-haspopup="menu"
+    @click="handleClick"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/LkDropdown/index.ts

@@ -0,0 +1,3 @@
+export { default as LkDropdown } from './LkDropdown.vue'
+export { default as LkDropdownTrigger } from './LkDropdownTrigger.vue'
+export { default as LkDropdownMenu } from './LkDropdownMenu.vue'

package/src/components/LkGrid.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+interface LkGridProps {
+  columns?: number
+  gap?: LkSizeUnit
+  autoResponsive?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<LkGridProps>(), {
+  columns: 2,
+  gap: 'md',
+  autoResponsive: false,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const slots = useSlots()
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    { autoResponsive: props.autoResponsive, gap: props.gap },
+    'grid',
+  ),
+)
+
+const columnStyle = computed(() => {
+  if (!props.class) {
+    return { gridTemplateColumns: `repeat(${props.columns}, 1fr)` }
+  }
+  return {}
+})
+
+const hasSlotContent = computed(() => !!slots.default)
+
+const placeholderCount = computed(() => {
+  if (hasSlotContent.value) return 0
+  return props.class ? props.columns : props.columns * 2
+})
+</script>
+
+<template>
+  <div
+    data-lk-component="grid"
+    v-bind="{ ...$attrs, ...dataAttrs }"
+    :class="props.class"
+    :style="columnStyle"
+  >
+    <slot />
+    <template v-if="!hasSlotContent">
+      <LkPlaceholderBlock v-for="i in placeholderCount" :key="i" />
+    </template>
+  </div>
+</template>

package/src/components/LkHeading.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+type LkHeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+interface LkHeadingProps {
+  tag?: LkHeadingTag
+  fontClass?: string
+  fontColor?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<LkHeadingProps>(), {
+  tag: 'h2',
+  fontClass: 'display2-bold',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const headingAttrs = computed(() => propsToDataAttrs({}, 'heading'))
+
+const headingClass = computed(() => {
+  const classes: string[] = []
+  if (props.fontClass) classes.push(props.fontClass)
+  if (props.fontColor) classes.push(`color-${props.fontColor}`)
+  if (props.class) classes.push(props.class)
+  return classes.join(' ')
+})
+</script>
+
+<template>
+  <component
+    :is="props.tag"
+    data-lk-component="heading"
+    :class="headingClass"
+    v-bind="{ ...$attrs, ...headingAttrs }"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/LkIcon.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface LkIconProps {
+  name?: string
+  fontClass?: Exclude<LkFontClass, `${string}-bold` | `${string}-mono`>
+  color?: LkColor | 'currentColor'
+  display?: 'block' | 'inline-block' | 'inline'
+  strokeWidth?: number
+  opticShift?: boolean
+}
+
+const props = withDefaults(defineProps<LkIconProps>(), {
+  name: 'roller-coaster',
+  color: 'onsurface',
+  strokeWidth: 2,
+  opticShift: false,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const iconStyle = computed(() => ({
+  width: '1em',
+  height: '1em',
+  color: `var(--lk-${props.color})`,
+  strokeWidth: props.strokeWidth,
+}))
+</script>
+
+<template>
+  <div
+    data-lk-component="icon"
+    :data-lk-icon-offset="props.opticShift"
+    :data-lk-icon-font-class="props.fontClass"
+    v-bind="$attrs"
+  >
+    <slot>
+      <!-- Default: render lucide icon via dynamic component or slot override -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        :stroke="`var(--lk-${props.color})`"
+        :stroke-width="props.strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <!-- Icon content should be provided by lucide-vue-next or slot -->
+      </svg>
+    </slot>
+  </div>
+</template>