@liftkit-vue/core 0.1.0 → 0.2.1

package/src/components/LkIconButton.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+import { getOnToken } from '../utils/colorUtils'
+import LkIcon from './LkIcon.vue'
+import LkStateLayer from './LkStateLayer.vue'
+
+export interface LkIconButtonProps {
+  icon?: string
+  variant?: 'fill' | 'outline' | 'text'
+  color?: LkColor
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  fontClass?: LkFontClass
+}
+
+const props = withDefaults(defineProps<LkIconButtonProps>(), {
+  icon: 'roller-coaster',
+  variant: 'fill',
+  color: 'primary',
+  size: 'md',
+  fontClass: 'body',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    { variant: props.variant, color: props.color, size: props.size },
+    'icon-button',
+  ),
+)
+
+const onToken = computed(() => getOnToken(props.color) as LkColor)
+
+const iconStrokeWidth = computed(() => {
+  switch (props.fontClass) {
+    case 'display1':
+    case 'display2':
+    case 'title1':
+      return 1.5
+    case 'subheading':
+    case 'label':
+    case 'caption':
+    case 'capline':
+      return 2
+    default:
+      return 1.75
+  }
+})
+
+const iconColor = computed(() => {
+  switch (props.variant) {
+    case 'outline':
+    case 'text':
+      return props.color
+    case 'fill':
+      return onToken.value
+    default:
+      return onToken.value
+  }
+})
+</script>
+
+<template>
+  <button
+    data-lk-component="icon-button"
+    type="button"
+    v-bind="{ ...$attrs, ...dataAttrs }"
+    :class="`${fontClass}`"
+  >
+    <div>
+      <LkIcon :name="icon" :color="iconColor" :stroke-width="iconStrokeWidth" />
+    </div>
+    <LkStateLayer :bg-color="iconColor" />
+  </button>
+</template>

package/src/components/LkImage.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+type LkAspectRatio =
+  | 'auto'
+  | '1/1'
+  | '2.39/1'
+  | '2/1'
+  | '16/9'
+  | '3/2'
+  | '4/3'
+  | '5/4'
+  | '1/2.39'
+  | '1/2'
+  | '9/16'
+  | '4/5'
+
+interface LkImageProps {
+  aspect?: LkAspectRatio
+  borderRadius?: LkSizeUnit | 'none' | 'zero'
+  objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  width?: LkSizeUnit | 'auto'
+  height?: LkSizeUnit | 'auto'
+  src?: string
+  alt?: string
+}
+
+const props = withDefaults(defineProps<LkImageProps>(), {
+  aspect: 'auto',
+  objectFit: 'fill',
+  width: 'auto',
+  height: 'auto',
+  alt: '',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      aspect: props.aspect,
+      borderRadius: props.borderRadius,
+      objectFit: props.objectFit,
+      width: props.width,
+      height: props.height,
+    },
+    'image',
+  ),
+)
+</script>
+
+<template>
+  <img
+    data-lk-component="image"
+    v-bind="{ ...$attrs, ...dataAttrs }"
+    :src="props.src"
+    :alt="props.alt"
+  />
+</template>

package/src/components/LkMaterialLayer.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+type LkMatProps_Glass = {
+  thickness?: 'thick' | 'normal' | 'thin'
+  tint?: LkColor
+  tintOpacity?: number
+  light?: boolean
+  lightExpression?: string
+}
+
+type LkMatProps_Flat = {
+  bgColor?: LkColorWithOnToken
+  textColor?: LkColor
+}
+
+type LkMaterialType = 'flat' | 'glass' | 'debug'
+
+interface LkMaterialLayerProps {
+  zIndex?: number
+  type?: LkMaterialType
+  materialProps?: LkMatProps_Glass | LkMatProps_Flat
+}
+
+const props = withDefaults(defineProps<LkMaterialLayerProps>(), {
+  zIndex: 0,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const matDataAttrs = computed(() => {
+  if (props.materialProps && props.type) {
+    return propsToDataAttrs(props.materialProps as Record<string, unknown>, props.type)
+  }
+  return {}
+})
+
+// Glass-specific computed styles
+const glassProps = computed(() => props.materialProps as LkMatProps_Glass | undefined)
+
+const tintStyle = computed(() => ({
+  opacity: glassProps.value?.tintOpacity || 0.2,
+  backgroundColor: `var(--lk-${glassProps.value?.tint || 'transparent'})`,
+}))
+
+const textureStyle = computed(() => {
+  const thickness = glassProps.value?.thickness || 'normal'
+  return {
+    '--blur-thick': 'var(--lk-size-lg)',
+    '--blur-normal': 'var(--lk-size-md)',
+    '--blur-thin': 'var(--lk-size-xs)',
+    zIndex: 1,
+    isolation: 'isolate',
+    backdropFilter: `blur(var(--blur-${thickness}))`,
+  } as Record<string, string | number>
+})
+
+const lightStyle = computed(() => ({
+  background: glassProps.value?.lightExpression || 'none',
+  mixBlendMode: 'soft-light' as const,
+  opacity: 1,
+}))
+
+const glassFillOpacity = computed(() => {
+  const thickness = glassProps.value?.thickness || 'normal'
+  switch (thickness) {
+    case 'thick': return 0.8
+    case 'normal': return 0.6
+    case 'thin': return 0.4
+    default: return 0.6
+  }
+})
+
+const glassFillStyle = computed(() => ({
+  backgroundColor: 'var(--lk-surface)',
+  opacity: glassFillOpacity.value,
+}))
+
+// Flat-specific
+const flatProps = computed(() => props.materialProps as LkMatProps_Flat | undefined)
+
+const flatBgStyle = computed(() => ({
+  backgroundColor: flatProps.value?.bgColor
+    ? `var(--lk-${flatProps.value.bgColor})`
+    : 'var(--lk-surface)',
+}))
+</script>
+
+<template>
+  <div
+    data-lk-component="material-layer"
+    :data-lk-material-type="props.type"
+    :style="{ zIndex: props.zIndex }"
+  >
+    <!-- Glass material -->
+    <template v-if="props.type === 'glass'">
+      <div>
+        <div data-lk-material-sublayer="texture" :style="textureStyle">
+          <div
+            v-if="glassProps?.tint"
+            data-lk-material-sublayer="tint"
+            :style="tintStyle"
+          >
+            <div
+              v-if="glassProps?.light"
+              data-lk-material-sublayer="light"
+              :style="lightStyle"
+            ></div>
+          </div>
+        </div>
+        <div
+          data-lk-material-sublayer="base-glass-fill"
+          :style="glassFillStyle"
+        ></div>
+      </div>
+    </template>
+
+    <!-- Flat material -->
+    <template v-if="props.type === 'flat'">
+      <div>
+        <div
+          data-lk-material-sublayer="bgColor"
+          :style="flatBgStyle"
+        ></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+[data-lk-component="material-layer"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+[data-lk-component="material-layer"] [data-lk-material-sublayer] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+</style>

package/src/components/LkMenuItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import LkStateLayer from './LkStateLayer.vue'
+import LkIcon from './LkIcon.vue'
+
+export interface LkIconProps {
+  name?: string
+  color?: LkColor
+  fontClass?: LkFontClass
+  strokeWidth?: number
+  opticShift?: boolean
+  [key: string]: unknown
+}
+
+export interface LkMenuItemProps {
+  startIcon?: LkIconProps
+  endIcon?: LkIconProps
+  fontClass?: LkFontClass
+  title?: string
+}
+
+const props = withDefaults(defineProps<LkMenuItemProps>(), {
+  fontClass: 'body',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <div
+    data-lk-component="menu-item"
+    :title="title"
+    v-bind="$attrs"
+  >
+    <LkIcon
+      v-if="startIcon"
+      v-bind="startIcon"
+      data-lk-icon-position="start"
+    />
+    <p data-lk-menu-item-element="content-wrap">
+      <slot />
+    </p>
+    <LkIcon
+      v-if="endIcon"
+      v-bind="endIcon"
+      data-lk-icon-position="end"
+    />
+    <LkStateLayer />
+  </div>
+</template>

package/src/components/LkNavbar.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref, computed, useAttrs } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+export interface LkNavbarProps {
+  material?: LkMaterial
+  homeHref?: string
+  logoSrc?: string
+  logoAlt?: string
+}
+
+const props = withDefaults(defineProps<LkNavbarProps>(), {
+  material: 'flat',
+  homeHref: '/',
+  logoSrc: '/logotype.svg',
+  logoAlt: '',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+const menuOpen = ref(false)
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value
+}
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs({ material: props.material }, 'navbar'),
+)
+</script>
+
+<template>
+  <div
+    data-lk-component="navbar"
+    v-bind="{ ...dataAttrs, ...attrs }"
+  >
+    <!-- Desktop Navbar -->
+    <div class="navbar-desktop">
+      <div data-lk-component="row" data-lk-row-align-items="center" data-lk-row-gap="sm">
+        <slot name="brand">
+          <a :href="homeHref">
+            <img :alt="logoAlt" :src="logoSrc" data-lk-component="image" data-lk-image-height="md" />
+          </a>
+        </slot>
+      </div>
+      <div data-lk-component="row">
+        <div data-lk-component="row" data-lk-slot="nav-buttons">
+          <slot name="navButtons" />
+        </div>
+        <div data-lk-component="row" data-lk-slot="nav-dropdowns">
+          <slot name="navDropdowns" />
+        </div>
+      </div>
+      <div data-lk-component="row" data-lk-navbar-el="nav-menu-end">
+        <div data-lk-slot="nav-icon-buttons">
+          <slot name="iconButtons" />
+        </div>
+        <div data-lk-slot="nav-cta-buttons">
+          <slot name="ctaButtons" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Navbar -->
+    <div data-lk-navbar-el="nav-menu">
+      <div
+        data-lk-component="column"
+        data-lk-column-align-items="start"
+        :class="['navbar-mobile', { active: menuOpen }]"
+      >
+        <button
+          class="navbar-menu-toggle"
+          type="button"
+          aria-label="Toggle menu"
+          :aria-expanded="menuOpen"
+          @click="toggleMenu"
+        >
+          <slot name="menuIcon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+          </slot>
+        </button>
+        <slot name="mobileBrand">
+          <a :href="homeHref">
+            <img :alt="logoAlt" :src="logoSrc" data-lk-component="image" data-lk-image-width="md" data-lk-image-height="md" />
+          </a>
+        </slot>
+        <div v-show="menuOpen" data-lk-component="column">
+          <slot name="navButtons" />
+        </div>
+        <div v-show="menuOpen" data-lk-component="column">
+          <slot name="navDropdowns" />
+        </div>
+        <div v-show="menuOpen">
+          <slot name="iconButtons" />
+        </div>
+        <div v-show="menuOpen" data-lk-component="column" class="flex-h gap-sm">
+          <slot name="ctaButtons" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Glass material layer -->
+    <div
+      v-if="material === 'glass'"
+      data-lk-component="material-layer"
+      data-lk-material-layer-type="glass"
+    />
+  </div>
+</template>

package/src/components/LkPlaceholderBlock.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <div data-lk-component="placeholder-block"></div>
+</template>

package/src/components/LkRow.vue

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

package/src/components/LkSection.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+
+type SpacingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none'
+
+interface LkSectionProps {
+  padding?: SpacingSize
+  px?: SpacingSize
+  py?: SpacingSize
+  pt?: SpacingSize
+  pb?: SpacingSize
+  pl?: SpacingSize
+  pr?: SpacingSize
+}
+
+const props = defineProps<LkSectionProps>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      padding: props.padding,
+      px: props.px,
+      py: props.py,
+      pt: props.pt,
+      pb: props.pb,
+      pl: props.pl,
+      pr: props.pr,
+    },
+    'section',
+  ),
+)
+</script>
+
+<template>
+  <section v-bind="{ ...$attrs, ...dataAttrs }">
+    <div data-lk-component="section">
+      <slot />
+    </div>
+  </section>
+</template>