@liftkit-vue/core 0.1.0 → 0.2.1

package/src/components/LkTabLink.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+import LkText from './LkText.vue'
+
+export interface LkTabLinkProps {
+  selected?: boolean
+  fontClass?: LkFontClass
+  indicatorClass?: string
+}
+
+const props = withDefaults(defineProps<LkTabLinkProps>(), {
+  selected: false,
+  fontClass: 'body',
+  indicatorClass: 'lk-indicator',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      selected: props.selected,
+      fontClass: props.fontClass,
+      indicatorClass: props.indicatorClass,
+    },
+    'tab-link',
+  ),
+)
+
+const textStyle = computed(() =>
+  props.selected ? { fontWeight: 700 } : {},
+)
+</script>
+
+<template>
+  <div
+    data-lk-component="tab-link"
+    v-bind="{ ...$attrs, ...dataAttrs }"
+  >
+    <div data-lk-slot="child">
+      <LkText :font-class="fontClass" :style="textStyle">
+        <slot />
+      </LkText>
+    </div>
+    <div :class="indicatorClass" />
+  </div>
+</template>

package/src/components/LkTabMenu.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+import LkRow from './LkRow.vue'
+import LkTabLink from './LkTabLink.vue'
+
+export interface LkTabMenuProps {
+  tabLinks?: string[]
+  alignItems?: 'start' | 'center' | 'end' | 'stretch'
+  justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around'
+  activeTab?: number
+}
+
+const props = withDefaults(defineProps<LkTabMenuProps>(), {
+  tabLinks: () => ['Tab Link 1', 'Tab Link 2', 'Tab Link 3'],
+  activeTab: 0,
+})
+
+const emit = defineEmits<{
+  'update:activeTab': [index: number]
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs(
+    {
+      alignItems: props.alignItems,
+      justifyContent: props.justifyContent,
+      activeTab: props.activeTab,
+    },
+    'tab-menu',
+  ),
+)
+
+function handleTabClick(index: number) {
+  emit('update:activeTab', index)
+}
+</script>
+
+<template>
+  <div
+    data-lk-component="tab-menu"
+    v-bind="{ ...$attrs, ...dataAttrs }"
+  >
+    <LkRow :align-items="alignItems" :justify-content="justifyContent">
+      <LkTabLink
+        v-for="(label, index) in tabLinks"
+        :key="index"
+        :selected="index === activeTab"
+        @click="handleTabClick(index)"
+      >
+        <div>{{ label ?? 'Tab Link' }}</div>
+      </LkTabLink>
+    </LkRow>
+  </div>
+</template>

package/src/components/LkTabs.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, computed, watch, provide } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+import LkTabMenu from './LkTabMenu.vue'
+
+export interface LkTabsProps {
+  tabLinks: string[]
+  scrollableContent?: boolean
+  defaultTab?: number
+}
+
+const props = withDefaults(defineProps<LkTabsProps>(), {
+  scrollableContent: false,
+  defaultTab: 0,
+})
+
+const emit = defineEmits<{
+  'activeTabChange': [index: number]
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const activeTab = ref(props.defaultTab)
+
+function setActiveTab(index: number) {
+  activeTab.value = index
+}
+
+watch(activeTab, (newVal) => {
+  emit('activeTabChange', newVal)
+})
+
+provide('lk-tabs', {
+  activeTab,
+  setActiveTab,
+})
+
+const dataAttrs = computed(() =>
+  propsToDataAttrs({ activeTab: activeTab.value }, 'tabs'),
+)
+</script>
+
+<template>
+  <div
+    data-lk-component="tabs"
+    :data-lk-tabs-content-scrollable="scrollableContent || undefined"
+    v-bind="{ ...$attrs, ...dataAttrs }"
+  >
+    <LkTabMenu
+      :tab-links="tabLinks"
+      justify-content="start"
+      align-items="stretch"
+      :active-tab="activeTab"
+      @update:active-tab="setActiveTab"
+    />
+    <div
+      data-lk-tabs-el="tab-content"
+      :data-lk-tabs-content-scrollable="scrollableContent || undefined"
+    >
+      <slot :active-tab="activeTab" />
+    </div>
+  </div>
+</template>

package/src/components/LkText.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface LkTextProps {
+  tag?: string
+  fontClass?: LkFontClass
+  color?: LkColor
+  class?: string
+}
+
+const props = withDefaults(defineProps<LkTextProps>(), {
+  tag: 'div',
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const textClass = computed(() => {
+  const classes: string[] = []
+  if (props.fontClass) classes.push(props.fontClass)
+  if (props.color) classes.push(`color-${props.color}`)
+  if (props.class) classes.push(props.class)
+  return classes.join(' ')
+})
+</script>
+
+<template>
+  <component
+    :is="props.tag"
+    data-lk-component="text"
+    :class="textClass"
+    v-bind="$attrs"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/LkTextInput.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { propsToDataAttrs } from '../utils/utilities'
+import LkIcon from './LkIcon.vue'
+import LkStateLayer from './LkStateLayer.vue'
+import LkRow from './LkRow.vue'
+import LkText from './LkText.vue'
+
+export interface LkTextInputProps {
+  modelValue?: string
+  labelPosition?: 'default' | 'on-input'
+  helpText?: string
+  placeholder?: string
+  name?: string
+  endIcon?: string
+  labelBackgroundColor?: LkColor
+}
+
+const props = withDefaults(defineProps<LkTextInputProps>(), {
+  modelValue: '',
+  labelPosition: 'default',
+  placeholder: 'Placeholder',
+  name: 'Label',
+  endIcon: 'search',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const textInputAttrs = computed(() =>
+  propsToDataAttrs({ labelPosition: props.labelPosition }, 'text-input'),
+)
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+const onInputLabelClass = computed(() => {
+  let cls = 'body'
+  if (props.labelBackgroundColor) {
+    cls += ` bg-${props.labelBackgroundColor}`
+  }
+  if (props.modelValue) {
+    cls += ' on-field-with-value-set'
+  }
+  return cls
+})
+</script>
+
+<template>
+  <div
+    data-lk-component="text-input"
+    v-bind="{ ...$attrs, ...textInputAttrs }"
+  >
+    <label
+      v-if="labelPosition === 'default'"
+      :for="name"
+      class="label"
+    >
+      {{ name }}
+    </label>
+
+    <div
+      data-lk-text-input-el="input-wrap"
+      :data-lk-input-help-text="helpText ? 'true' : 'false'"
+      :data-help-text="helpText"
+    >
+      <label
+        v-if="labelPosition === 'on-input'"
+        :for="name"
+        :class="onInputLabelClass"
+      >
+        {{ name }}
+      </label>
+      <input
+        type="text"
+        :name="name"
+        :id="name"
+        :placeholder="labelPosition !== 'on-input' ? placeholder : ''"
+        :value="modelValue"
+        @input="onInput"
+      />
+      <LkStateLayer />
+      <LkIcon :name="endIcon" />
+    </div>
+
+    <LkRow v-if="helpText" align-items="center">
+      <LkIcon
+        name="info"
+        font-class="capline"
+        color="outline"
+        :optic-shift="true"
+      />
+      <LkText color="outline" font-class="caption" class="m-left-2xs">
+        Help text goes here
+      </LkText>
+    </LkRow>
+  </div>
+</template>

package/src/components/LkTheme.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { provideTheme, type PaletteState, type ColorModePreference } from '../composables'
+
+export interface LkThemeProps {
+  /** Source/seed color to generate theme from (hex) */
+  sourceColor?: string
+  /** Color mode - 'auto' follows OS setting, 'light'/'dark' forces mode */
+  colorMode?: ColorModePreference
+  /** Custom initial palette overrides */
+  palette?: Partial<PaletteState>
+}
+
+const props = withDefaults(defineProps<LkThemeProps>(), {
+  sourceColor: undefined,
+  colorMode: 'auto',
+  palette: undefined,
+})
+
+// Build the initial palette from props
+const initialPalette = computed<Partial<PaletteState>>(() => {
+  const pal: Partial<PaletteState> = {}
+  if (props.palette) {
+    Object.assign(pal, props.palette)
+  }
+  return pal
+})
+
+// Provide theme context to all children
+const theme = provideTheme(initialPalette.value)
+
+// Set the initial color mode preference
+theme.setColorMode(props.colorMode)
+
+// If sourceColor is provided, generate theme from it
+if (props.sourceColor) {
+  theme.updateThemeFromMaster(props.sourceColor)
+}
+
+defineExpose({
+  theme,
+})
+</script>
+
+<template>
+  <div class="lk-theme" v-bind="$attrs">
+    <slot />
+  </div>
+</template>