vunor 0.0.2

package/src/components/Input/InputShell.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { useInputPi } from './pi'
+import type { TInputShellProps, TInputShellEmits } from './types'
+import { useInputDataAttrs, useHtmlInputAttrs } from './utils'
+
+const props = withDefaults(defineProps<TInputShellProps>(), {
+  design: 'flat',
+  rows: 3,
+})
+
+const emit = defineEmits<TInputShellEmits>()
+
+const modelValue = defineModel<string | number>()
+
+const focused = ref<boolean>(false)
+
+useInputPi().inject(focused)
+
+const attrs = useInputDataAttrs()
+const inputAttrs = useHtmlInputAttrs()
+
+function onFocus(event: FocusEvent) {
+  focused.value = true
+  emit('focus', event)
+}
+
+function onBlur(event: FocusEvent) {
+  focused.value = false
+  emit('blur', event)
+}
+
+function taGrow(event: Event) {
+  if (props.autoGrow) {
+    const ta = event.target as HTMLTextAreaElement | undefined
+    if (ta) {
+      ta.style.height = 'auto'
+      ta.style.height = ta.scrollHeight + 'px'
+    }
+  }
+}
+
+function focusInput(event: MouseEvent) {
+  const input = (event.target as HTMLDivElement | undefined)?.querySelector(
+    'input, textarea'
+  ) as HTMLInputElement
+  if (input) {
+    input.focus()
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    @click="focusInput"
+    class="i8 group/i8 flex-grow"
+    :class="{
+      'i8-flat': design === 'flat',
+      'i8-filled': design === 'filled' || design === 'round',
+      'i8-round': design === 'round',
+      'segmented': groupItem,
+    }"
+    v-bind="attrs"
+    :data-active="focused || active"
+  >
+    <span class="i8-underline" />
+    <span class="absolute left-0 right-0 top-0 bottom-0" v-if="!!$slots.overlay">
+      <slot name="overlay"></slot>
+    </span>
+
+    <div
+      v-if="$slots.prepend || !!iconPrepend"
+      class="i8-prepend"
+      :class="{
+        'i8-icon-clickable': !!onPrependClick,
+      }"
+    >
+      <slot name="prepend" v-bind="attrs">
+        <VuIcon :name="iconPrepend!" @click="emit('prependClick', $event)" />
+      </slot>
+    </div>
+
+    <div class="i8-input-wrapper">
+      <div
+        v-if="!!label"
+        class="i8-label-wrapper"
+        :data-has-prepend="inputAttrs?.['data-has-prepend']"
+        :data-has-append="inputAttrs?.['data-has-append']"
+      >
+        <label v-if="!!label" class="i8-label" :data-required="required">{{ label }}</label>
+      </div>
+
+      <slot v-bind="inputAttrs!" :onFocus :onBlur>
+        <div v-if="type === 'textarea'" class="i8-ta-wrapper">
+          <textarea
+            v-bind="inputAttrs"
+            style="resize: none"
+            class="i8-textarea"
+            v-model="modelValue"
+            @input="taGrow"
+            @focus="onFocus"
+            @blur="onBlur"
+          />
+        </div>
+        <input
+          v-else
+          v-bind="inputAttrs"
+          class="i8-input"
+          v-model="modelValue"
+          @focus="onFocus"
+          @blur="onBlur"
+        />
+      </slot>
+    </div>
+
+    <div
+      v-if="$slots.append || !!iconAppend || loading"
+      class="i8-append"
+      :class="{
+        'i8-icon-clickable': !!onAppendClick,
+      }"
+    >
+      <VuLoadingIndicator v-if="loading" class="text-grey" />
+      <slot
+        name="append"
+        v-bind="attrs"
+        :emitClick="(event: MouseEvent) => emit('appendClick', event)"
+        :iconAppend
+      >
+        <VuIcon :name="iconAppend!" @click="emit('appendClick', $event)" />
+      </slot>
+    </div>
+  </Primitive>
+</template>

package/src/components/Input/index.ts

@@ -0,0 +1,4 @@
+export { default as VuInput } from './Input.vue'
+export { default as VuInputShell } from './InputShell.vue'
+export * from './types'
+export * from './utils'

package/src/components/Input/pi.ts

@@ -0,0 +1,18 @@
+import { computed, onUnmounted, ref } from 'vue'
+
+import { useProvideInject } from '../utils'
+
+export const useInputPi = () =>
+  useProvideInject('__vunor_input_PI', () => {
+    const focused = computed(() => !!inputs.value.some(a => a.value))
+    const inputs = ref<Array<Ref<boolean>>>([])
+    return {
+      _provide: () => ({ focused }),
+      _inject: (a: Ref<boolean>) => {
+        inputs.value.push(a)
+        onUnmounted(() => {
+          inputs.value = inputs.value.filter(i => i !== a)
+        })
+      },
+    }
+  })

package/src/components/Input/types.ts

@@ -0,0 +1,52 @@
+export interface TInputAttrs {
+  'placeholder'?: string
+  'type'?: string
+  'rows'?: number
+  'required'?: boolean
+  'maxlength'?: number
+  'data-has-prepend': boolean
+  'data-has-append': boolean
+  'data-has-label': boolean
+  'disabled'?: boolean
+  'readonly'?: boolean
+  'autocomplete'?: string
+}
+
+export interface TInputShellProps
+  extends Omit<TInputAttrs, 'data-has-prepend' | 'data-has-append' | 'data-has-label'> {
+  label?: string
+  design?: 'flat' | 'filled' | 'round'
+  iconPrepend?: string
+  iconAppend?: string
+  groupItem?: boolean
+  autoGrow?: boolean
+  active?: boolean
+  loading?: boolean
+  onAppendClick?: (event: MouseEvent) => void
+  onPrependClick?: (event: MouseEvent) => void
+  onBlur?: (event: FocusEvent) => void
+  onFocus?: (event: FocusEvent) => void
+}
+
+export interface TInputProps extends TInputShellProps {
+  iconBefore?: string
+  iconAfter?: string
+  error?: string | boolean
+  hint?: string
+  groupTemplate?: string
+  stackLabel?: boolean
+  onBeforeClick?: (event: MouseEvent) => void
+  onAfterClick?: (event: MouseEvent) => void
+  onClick?: (event: MouseEvent) => void
+  onBlur?: (event: FocusEvent) => void
+  onFocus?: (event: FocusEvent) => void
+}
+
+export interface TInputShellEmits {
+  (e: 'prependClick' | 'appendClick', event: MouseEvent): void
+  (e: 'blur' | 'focus', event: FocusEvent): void
+}
+
+export interface TInputEmits extends TInputShellEmits {
+  (e: 'beforeClick' | 'afterClick' | 'click', event: MouseEvent): void
+}

package/src/components/Input/utils.ts

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import type { ComputedRef } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
+
+import type { TInputAttrs, TInputProps, TInputShellProps } from './types'
+
+export function useHtmlInputAttrs(): ComputedRef<TInputAttrs> | undefined {
+  const instance = getCurrentInstance()
+  if (instance) {
+    const props = instance.props as unknown as TInputShellProps
+    return computed(() => ({
+      'placeholder': props.placeholder,
+      'type': props.type ?? 'text',
+      'rows': props.rows,
+      'required': props.required,
+      'disabled': props.disabled,
+      'readonly': props.readonly,
+      'autocomplete': props.autocomplete,
+      'data-has-prepend': !!instance.slots.prepend || !!instance.props.iconPrepend,
+      'data-has-append':
+        !!instance.slots.append || !!instance.props.iconAppend || !!instance.props.loading,
+      'data-has-label': !!props.label,
+    }))
+  }
+}
+
+export function useInputProps(): ComputedRef<TInputProps> | undefined {
+  const instance = getCurrentInstance()
+  if (instance) {
+    const props = instance.props as unknown as TInputProps
+    return computed(() => ({
+      label: props.label,
+      stackLabel: props.stackLabel,
+      placeholder: props.placeholder,
+      design: props.design,
+      readonly: props.readonly,
+      disabled: props.disabled,
+      iconPrepend: props.iconPrepend,
+      iconAppend: props.iconAppend,
+      groupItem: props.groupItem,
+      type: props.type,
+      rows: props.type === 'textarea' ? props.rows : undefined,
+      autoGrow: props.autoGrow,
+      maxlength: props.maxlength,
+      required: props.required,
+      active: props.active,
+      loading: props.loading,
+      onAppendClick: props.onAppendClick,
+      onPrependClick: props.onPrependClick,
+      onBlur: props.onBlur,
+      onFocus: props.onFocus,
+      iconBefore: props.iconBefore,
+      iconAfter: props.iconAfter,
+      error: props.error,
+      hint: props.hint,
+      autocomplete: props.autocomplete,
+      onBeforeClick: props.onBeforeClick,
+      onAfterClick: props.onAfterClick,
+      onClick: props.onClick,
+    }))
+  }
+}
+export function useInputShellProps(): ComputedRef<TInputShellProps> | undefined {
+  const instance = getCurrentInstance()
+  if (instance) {
+    const props = instance.props as unknown as TInputProps
+    return computed(() => ({
+      label: props.stackLabel ? undefined : props.label,
+      placeholder: props.placeholder,
+      readonly: props.readonly,
+      design: props.design,
+      disabled: props.disabled,
+      loading: props.loading,
+      iconPrepend: props.iconPrepend,
+      iconAppend: props.iconAppend,
+      groupItem: props.groupItem,
+      type: props.type,
+      rows: props.type === 'textarea' ? props.rows : undefined,
+      autoGrow: props.autoGrow,
+      maxlength: props.maxlength,
+      required: props.required,
+      active: props.active,
+      autocomplete: props.autocomplete,
+      onAppendClick: props.onAppendClick,
+      onPrependClick: props.onPrependClick,
+      onBlur: props.onBlur,
+      onFocus: props.onFocus,
+    }))
+  }
+  return undefined
+}
+
+export function useInputDataAttrs() {
+  const instance = getCurrentInstance() as unknown as
+    | {
+        props: TInputProps
+        setupState?: { modelValue: string | number | undefined }
+      }
+    | undefined
+  return computed(() => ({
+    'data-has-label': instance?.props.label ? '' : undefined,
+    'data-has-placeholder': instance?.props.placeholder ? '' : undefined,
+    'data-has-value':
+      instance?.setupState?.modelValue || instance?.setupState?.modelValue === 0 ? '' : undefined,
+    'data-type': instance?.props.type ?? 'text',
+    'aria-disabled': instance?.props.disabled ? true : undefined,
+  }))
+}

package/src/components/Label/Label.vue

@@ -0,0 +1,6 @@
+<script setup></script>
+<template>
+  <label class="max-w-100% overflow-hidden text-ellipsis whitespace-nowrap text-body fw-$bold">
+    <slot></slot>
+  </label>
+</template>

package/src/components/Label/index.ts

@@ -0,0 +1 @@
+export { default as VuLabel } from './Label.vue'

package/src/components/Loading/LoadingIndicator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ size: string }>(), { size: '1em' })
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 14 14"
+    fill="none"
+    class="loading-indicator loading-indicator-ring"
+  >
+    <circle
+      cx="50%"
+      cy="50%"
+      r="6"
+      stroke="currentColor"
+      stroke-dasharray="38 38"
+      stroke-width="1"
+      class=""
+    />
+  </svg>
+</template>

package/src/components/Loading/index.ts

@@ -0,0 +1 @@
+export { default as VuLoadingIndicator } from './LoadingIndicator.vue'

package/src/components/Loading/shortcuts.ts

@@ -0,0 +1,9 @@
+import { scFromObject } from '../../theme/utils/shortcut-obj'
+
+export const loadingShortcuts = {
+  'loading-indicator': 'cursor-wait',
+  'loading-indicator-ring': scFromObject({
+    '': 'animate-spin animate-duration-1500',
+    '[&>circle]:': 'animate-loading-dashoffset animate-count-infinite animate-duration-2500',
+  }),
+}

package/src/components/Menu/Menu.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import VuMenuItem from './MenuItem.vue'
+import VuInput from '../Input/Input.vue'
+
+type AcceptableValue = string | number | boolean | Record<string, any>
+type TItem = { label: string; value: AcceptableValue; icon?: string; group?: string }
+type Props = {
+  items: (string | TItem)[]
+  emptyText?: string
+}
+const props = defineProps<Props>()
+
+const modelValue = defineModel<AcceptableValue>()
+
+const groups = computed(() => {
+  const grps = {} as Record<string, TItem[]>
+  for (const item of props.items) {
+    const _item: TItem =
+      typeof item === 'string'
+        ? {
+            label: item,
+            value: item,
+            icon: '',
+            group: '',
+          }
+        : item
+    if (!_item.group) {
+      _item.group = ''
+    }
+    grps[_item.group] = grps[_item.group] || []
+    grps[_item.group].push(_item)
+  }
+  return Object.entries(grps)
+    .sort(([a], [b]) => (a === '' ? -1 : b === '' ? 1 : 0))
+    .map(([group, items]) => ({ group, items }))
+})
+
+function handleHomeEnd(event: KeyboardEvent) {
+  const target = event.target as HTMLInputElement
+  const length = event.key === 'Home' ? 0 : target.value.length
+  if (event.shiftKey) {
+    target.setSelectionRange(
+      event.key === 'Home' ? 0 : target.selectionEnd ?? target.value.length,
+      event.key === 'Home' ? target.selectionStart ?? 0 : target.value.length
+    )
+  } else {
+    target.setSelectionRange(length, length)
+  }
+}
+</script>
+
+<template>
+  <ComboboxRoot
+    :open="true"
+    model-value=""
+    @update:model-value="modelValue = $event"
+    class="menu-root"
+  >
+    <!-- input -->
+    <ComboboxInput
+      auto-focus
+      design="flat"
+      icon-prepend="i--search"
+      class="px-$m mb-$s"
+      placeholder="Search"
+      :as="VuInput"
+      @keydown.home.end="handleHomeEnd"
+    />
+
+    <!-- list -->
+    <ComboboxContent class="overflow-y-auto overflow-x-hidden" :dismissable="false">
+      <div role="presentation">
+        <!-- empty -->
+        <ComboboxEmpty v-if="$slots.empty || emptyText">
+          <slot name="empty">
+            <div class="w-full text-center py-$xs" v-if="!!emptyText">
+              {{ emptyText }}
+            </div>
+          </slot>
+        </ComboboxEmpty>
+        <!-- group -->
+        <ComboboxGroup v-for="grp of groups" class="">
+          <ComboboxLabel v-if="grp.group" class="px-$m text-mt-$l text-mb-$m">
+            <span class="text-caption fw-bold">{{ grp.group }}</span>
+          </ComboboxLabel>
+          <!-- command item -->
+          <ComboboxItem
+            v-for="item of grp.items"
+            :value="item.value"
+            :icon="item.icon"
+            :label="item.label"
+            :selected="modelValue === item.value"
+            :as="VuMenuItem"
+          />
+        </ComboboxGroup>
+        <!--  -->
+      </div>
+    </ComboboxContent>
+  </ComboboxRoot>
+</template>

package/src/components/Menu/MenuItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  selected?: boolean
+  label?: string
+  ariaSelected?: boolean
+}>()
+</script>
+
+<template>
+  <VuButton
+    :icon="icon"
+    :selected="selected"
+    :label="label"
+    :class="{
+      'scope-grey': !selected,
+    }"
+    class="menu-item"
+  />
+</template>

package/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export { default as VuMenu } from './Menu.vue'
+export { default as VuMenuItem } from './MenuItem.vue'

package/src/components/Menu/shortcuts.ts

@@ -0,0 +1,6 @@
+import { scFromObject } from '../../theme/utils/shortcut-obj'
+
+export const menuShortcuts = {
+  'menu-root': 'flex flex-col overflow-hidden',
+  'menu-item': 'justify-start c8-flat gap-$m w-full fw-400',
+}

package/src/components/OverflowContainer/OverflowContainer.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts" generic="T">
+const props = defineProps<{ items: T[]; maxVisible?: number }>()
+
+const hiddenCount = ref(0)
+
+const visibleItems = computed(() => {
+  return props.items.slice(0, props.items.length - hiddenCount.value)
+})
+
+const hiddenItems = computed(() => {
+  return props.items.slice(props.items.length - hiddenCount.value)
+})
+
+const root = ref<{ $el: HTMLDivElement }>()
+
+let mObserver: MutationObserver
+let rObserver: ResizeObserver
+
+watch(
+  () => [props.items],
+  () => fit()
+)
+
+onMounted(() => {
+  mObserver = new MutationObserver(() => {
+    if (!busy) {
+      fit()
+    }
+  })
+  rObserver = new ResizeObserver(() => {
+    if (!busy) {
+      fit()
+    }
+  })
+  if (root.value) {
+    rObserver.observe(root.value.$el, {
+      box: 'content-box',
+    })
+    mObserver.observe(root.value.$el, {
+      childList: true,
+      subtree: true,
+    })
+  }
+  fit()
+})
+
+onBeforeUnmount(() => {
+  if (root.value) {
+    mObserver?.disconnect()
+    rObserver?.disconnect()
+  }
+})
+
+let busy = false
+
+async function fit(i?: number) {
+  if (root.value && props.items.length > 1) {
+    busy = true
+    hiddenCount.value =
+      typeof i === 'number' ? i : Math.max(0, props.items.length - (props.maxVisible ?? 999))
+    await nextTick()
+
+    const rootWidth = root.value.$el.getBoundingClientRect().width
+
+    let itFits = false
+    let additional = 1
+    while (!itFits) {
+      itFits = true
+      const children = root.value.$el.children
+      const firstLeft = children[0]?.getBoundingClientRect().left
+      for (let j = 0; j < children.length; j++) {
+        const { left, width } = children[j].getBoundingClientRect()
+        const w = left + width - firstLeft
+        if (w >= rootWidth) {
+          itFits = false
+          hiddenCount.value =
+            props.items.length - (j + 1) + (hiddenCount.value > 0 ? additional : 1)
+          if (additional === 1) {
+            additional = 2
+          }
+          await nextTick()
+          break
+        }
+      }
+    }
+    busy = false
+
+    // if (!doesItFit()) {
+    //   busy = true
+    //   fit(hiddenCount.value + 1)
+    // } else {
+    //   busy = false
+    // }
+  }
+  if (props.items.length < 2) {
+    hiddenCount.value = 0
+  }
+}
+
+function doesItFit() {
+  if (root.value) {
+    const c = root.value.$el
+    const { width } = c.getBoundingClientRect()
+    const overflowWidth = c.scrollWidth
+    return overflowWidth <= width
+  }
+  return true
+}
+</script>
+
+<template>
+  <Primitive class="flex" ref="root">
+    <slot v-for="item of visibleItems" :item>
+      <span>{{ item }}</span>
+    </slot>
+    <slot v-if="hiddenCount > 0" name="overflow" :count="hiddenCount" :items="hiddenItems">
+      <span class="whitespace-nowrap">{{ hiddenCount }} more...</span>
+    </slot>
+  </Primitive>
+</template>

package/src/components/OverflowContainer/index.ts

@@ -0,0 +1 @@
+export { default as VuOverflowContainer } from './OverflowContainer.vue'