vunor 0.0.2

package/src/components/Pagination/Pagination.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+defineProps<{
+  total: number
+  defaultPage?: number
+  showEdges?: boolean
+  siblingCount?: number
+  itemsPerPage?: number
+  showArrows?: boolean
+}>()
+const modelValue = defineModel<number>()
+const emit = defineEmits<{
+  (name: 'update:page', v: number): void
+}>()
+</script>
+
+<template>
+  <PaginationRoot
+    :total
+    :itemsPerPage
+    :sibling-count
+    :show-edges
+    :default-page
+    v-model:page="modelValue"
+    @update:page="emit('update:page', $event)"
+  >
+    <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+      <PaginationFirst
+        v-if="!showEdges && showArrows"
+        class="size-fingertip flex items-center justify-center btn btn-square c8-flat disabled:opacity-30"
+      >
+        <VuIcon name="i--chevron-left-2" class="btn-icon btn-icon-left" />
+      </PaginationFirst>
+      <PaginationPrev
+        v-if="showArrows"
+        class="size-fingertip flex items-center justify-center mr-4 btn btn-square c8-flat disabled:opacity-30"
+      >
+        <VuIcon name="i--chevron-left" class="btn-icon btn-icon-left" />
+      </PaginationPrev>
+      <template v-for="(page, index) in items">
+        <PaginationListItem
+          v-if="page.type === 'page'"
+          :key="index"
+          class="size-fingertip btn btn-square c8-flat"
+          :value="page.value"
+        >
+          {{ page.value }}
+        </PaginationListItem>
+        <PaginationEllipsis
+          v-else
+          :key="page.type"
+          :index="index"
+          class="size-fingertip flex items-center justify-center"
+        >
+          &#8230;
+        </PaginationEllipsis>
+      </template>
+      <PaginationNext
+        v-if="showArrows"
+        class="size-fingertip flex items-center justify-center ml-4 btn btn-square c8-flat disabled:opacity-30"
+      >
+        <VuIcon name="i--chevron-right" class="btn-icon btn-icon-left" />
+      </PaginationNext>
+      <PaginationLast
+        v-if="!showEdges && showArrows"
+        class="size-fingertip flex items-center justify-center btn btn-square c8-flat disabled:opacity-30"
+      >
+        <VuIcon name="i--chevron-right-2" class="btn-icon btn-icon-left" />
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>

package/src/components/Popover/Popover.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { PopoverContentProps } from 'radix-vue'
+
+const props = defineProps<
+  PopoverContentProps & {
+    class?: string | Record<string, boolean>
+    icon?: string
+    label?: string
+    asLink?: boolean
+  }
+>()
+
+const popupContentProps = computed(() => {
+  const obj = {} as PopoverContentProps
+  for (const [key, value] of Object.entries(props)) {
+    if (!['class', 'label', 'icon'].includes(key)) {
+      obj[key as keyof PopoverContentProps] = value as undefined
+    }
+  }
+  return obj
+})
+const modelValue = defineModel<boolean>()
+function open() {
+  modelValue.value = true
+}
+function close() {
+  modelValue.value = false
+}
+</script>
+
+<template>
+  <PopoverRoot as-child v-model:open="modelValue">
+    <PopoverTrigger as-child>
+      <slot :isOpen="modelValue" :close :open
+        ><VuButton
+          :as-link
+          :icon="icon || 'i--more-vert'"
+          :class
+          :label
+          :data-active="modelValue ? '' : undefined"
+      /></slot>
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent
+        v-bind="popupContentProps"
+        :style="{
+          'max-height': 'var(--radix-popper-available-height)',
+          'overflow': 'auto',
+        }"
+        as-child
+      >
+        <slot name="content" :isOpen="modelValue" :close :open>
+          <div></div>
+        </slot>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/Popover/index.ts

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

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts" generic="T extends { value: string; label: string; disabled?: boolean }">
+import { useId } from 'radix-vue'
+
+const props = defineProps<{
+  items: (string | T)[]
+  defaultValue?: string
+  label?: string
+  labelVisible?: boolean
+  row?: boolean
+  disabledValues?: string[]
+  disabled?: boolean
+  class?: string | Record<string, boolean>
+  error?: string | boolean
+  verticalMiddle?: boolean
+  reverse?: boolean
+}>()
+
+const _items = computed<T[]>(() => {
+  return props.items.map(item =>
+    typeof item === 'string' ? ({ value: item, label: item } as T) : item
+  )
+})
+
+const id = useId()
+
+const modelValue = defineModel<string>()
+
+function isDisabled(val: string) {
+  return props.disabledValues?.includes(val)
+}
+</script>
+<template>
+  <div class="rb-container" :class>
+    <label v-if="!!label && labelVisible" class="rb-label">{{ label }}</label>
+    <RadioGroupRoot
+      v-model="modelValue"
+      class="rb-root"
+      :class="{ 'rb-row': row }"
+      :default-value
+      :aria-label="label"
+      :disabled
+      :data-error="!!error"
+      :aria-disabled="disabled"
+    >
+      <div
+        class="rb-item-wrapper"
+        :class="{
+          'items-center': verticalMiddle,
+          'items-start': !verticalMiddle,
+          'flex-row-reverse': reverse,
+        }"
+        v-for="item of _items"
+      >
+        <RadioGroupItem
+          :id="id + '-' + item.value"
+          class="rb-item"
+          :data-error="!!error"
+          :value="item.value"
+          :disabled="disabled || item.disabled || isDisabled(item.value)"
+          :aria-disabled="disabled || item.disabled || isDisabled(item.value)"
+        >
+          <RadioGroupIndicator class="rb-item-indicator" />
+        </RadioGroupItem>
+        <label
+          class="rb-item-label"
+          :for="id + '-' + item.value"
+          :aria-disabled="disabled || item.disabled || isDisabled(item.value)"
+        >
+          <slot v-bind="item">
+            {{ item.label }}
+          </slot>
+        </label>
+      </div>
+    </RadioGroupRoot>
+    <div
+      v-if="!!error && typeof error === 'string'"
+      class="text-caption text-error-500 text-mt-0"
+      :class="{ 'text-right': reverse }"
+    >
+      {{ error }}
+    </div>
+  </div>
+</template>

package/src/components/RadioGroup/index.ts

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

package/src/components/RadioGroup/shortcuts.ts

@@ -0,0 +1,34 @@
+import { scFromObject } from '../../theme/utils/shortcut-obj'
+
+export const radioShortcuts = {
+  'rb-container': scFromObject({
+    '': 'flex flex-col gap-$s text-body',
+  }),
+  'rb-label': scFromObject({
+    '': 'text-label text-grey-400',
+  }),
+  'rb-root': scFromObject({
+    '': 'flex gap-x-$l gap-y-$m',
+    '[&.rb-row]:': 'flex-wrap',
+    'not-[.rb-row]:': 'flex-col',
+  }),
+  'rb-item-wrapper': scFromObject({
+    '': 'flex',
+  }),
+  'rb-item': scFromObject({
+    '': 'select-none shrink-0 current-bg-scope-color-500 bg-current/0 size-1.25em rounded-full cursor-default current-border-grey-500 border-current/40 border-[0.16em] transition-none backdrop-blur-sm',
+    "data-[state=checked]:not-[[data-error='true']]:":
+      'current-border-scope-color-500 border-current',
+    'data-[state=checked]:': 'bg-current',
+    'active:enabled:': 'bg-current/20',
+    'aria-[disabled=true]:': 'scope-grey opacity-50 cursor-not-allowed',
+    'data-[error=true]:': 'current-border-error-500 current-bg-error-500',
+  }),
+  'rb-item-indicator': scFromObject({
+    '': "flex items-center justify-center w-full h-full rounded-full relative after:content-[''] after:block after:size-[0.5em] after:rounded-[50%] after:bg-white animate-zoom-in animate-duration-100",
+  }),
+  'rb-item-label': scFromObject({
+    '': 'select-none px-$s text-body leading-none lh-1.25em',
+    'aria-[disabled=true]:': 'scope-grey opacity-50 cursor-not-allowed',
+  }),
+}

package/src/components/Select/Select.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts" generic="T extends TSelectItem">
+import type { TInputProps, TInputShellProps, TInputEmits } from '../Input/types'
+import { useInputShellProps, useInputProps } from '../Input/utils'
+import type { TSelectBaseProps, TSelectItem } from './types'
+
+type Props = Omit<TInputProps & TInputShellProps, 'active'> & TSelectBaseProps<T>
+
+const props = withDefaults(defineProps<Props>(), {
+  sideOffset: 2,
+})
+defineEmits<TInputEmits>()
+
+const forwardProps = computed(() => {
+  if (props.groupItem) {
+    return useInputShellProps()?.value
+  }
+  return useInputProps()?.value
+})
+
+const modelValue = defineModel<string>()
+</script>
+
+<template>
+  <VuSelectBase
+    v-model="modelValue"
+    :disabled-values
+    :popup-class
+    :popup-round
+    :value-class
+    :icon-class
+    :class
+    :items
+    :required
+    :disabled
+    :placeholder
+    :defaultValue
+    :popupPosition
+    :side
+    :sideOffset
+    :sticky
+    :updatePositionStrategy
+    v-slot="s"
+  >
+    <SelectTrigger as-child v-if="groupItem">
+      <!-- prettier-ignore-attribute v-model -->
+      <VuInputShell
+        class="cursor-pointer select-none"
+        v-bind="forwardProps"
+        :icon-append="typeof iconAppend === 'string' ? iconAppend : s.icon"
+        :model-value="(s.displayItem?.label || s.displayItem?.value) as string"
+        :active="s.open"
+        readonly
+        @click="s.openPopup"
+        tabindex="-1"
+        @focus="$event.target.querySelector('input')?.focus()"
+      >
+        <template #overlay>
+          <SelectValue class="absolute left-0 right-0 h-0 invisible" />
+        </template>
+      </VuInputShell>
+    </SelectTrigger>
+    <!-- prettier-ignore-attribute v-model -->
+    <VuInput
+      v-else
+      class="select-none"
+      v-bind="forwardProps"
+      :icon-append="typeof iconAppend === 'string' ? iconAppend : s.icon"
+      :model-value="(s.displayItem?.label || s.displayItem?.value) as string"
+      :active="s.open"
+      :stack-label
+      readonly
+      @click="s.openPopup"
+      v-slot="shellProps"
+    >
+      <SelectTrigger as-child>
+        <!-- prettier-ignore-attribute v-model -->
+        <VuInputShell
+          class="cursor-pointer select-none"
+          v-bind="shellProps"
+          :model-value="(s.displayItem?.label || s.displayItem?.value) as string"
+          readonly
+          type="text"
+          tabindex="-1"
+          @focus="$event.target.querySelector('input')?.focus()"
+        >
+          <template #overlay>
+            <SelectValue class="absolute left-[-1px] right-0 h-0 invisible" />
+          </template>
+        </VuInputShell>
+      </SelectTrigger>
+    </VuInput>
+  </VuSelectBase>
+</template>

package/src/components/Select/SelectBase.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts" generic="T extends TSelectItem">
+import type { TSelectBaseProps, TSelectItem } from './types'
+
+const props = defineProps<TSelectBaseProps<T>>()
+
+const open = defineModel<boolean>('open')
+const modelValue = defineModel<string>()
+
+const groups = computed(() => {
+  if (Array.isArray(props.items)) {
+    return [
+      {
+        grp: '',
+        items: props.items.map(item =>
+          typeof item === 'string' ? ({ value: item, label: item } as T) : item
+        ),
+      },
+    ]
+  } else {
+    const r = [] as { grp: string; items: T[] }[]
+    for (const [key, val] of Object.entries(props.items)) {
+      r.push({
+        grp: key,
+        items: val.map(item =>
+          typeof item === 'string' ? ({ value: item, label: item } as T) : item
+        ),
+      })
+    }
+    return r
+  }
+})
+
+const flatItems = computed(() => {
+  const r = new Map<string | null | undefined, T>()
+  for (const grp of groups.value) {
+    for (const item of grp.items) {
+      r.set(item.value, item)
+    }
+  }
+  return r
+})
+
+function isItemDisabled(val: string | null | undefined) {
+  return props.disabledValues?.includes(val)
+}
+
+async function openPopup() {
+  if (!props.disabled) {
+    open.value = !open.value
+  }
+}
+
+const displayItem = computed(() => flatItems.value.get(modelValue.value))
+
+function getSearchValue(item: T) {
+  return item.search || item.label?.replace(/[^\p{L}\p{N}\p{P}\p{M}\p{Zs}]/gu, '').trim()
+}
+</script>
+
+<template>
+  <!-- prettier-ignore-attribute default-value -->
+  <SelectRoot
+    v-model="modelValue"
+    v-model:open="open"
+    :disabled
+    :required
+    :default-value="defaultValue as string"
+  >
+    <slot :displayItem="displayItem" :value="modelValue" :openPopup :open :icon="'i--chevron-down'">
+      <SelectTrigger :class>
+        <VuIcon
+          v-if="!!displayItem?.icon"
+          :name="displayItem.icon"
+          class="inline-block vertical-middle mr-$xs"
+          style="color: currentColor"
+        />
+        <SelectValue :placeholder :class="valueClass">
+          {{ displayItem?.label }}
+        </SelectValue>
+        <VuIcon name="i--chevron-down" :class="iconClass" />
+      </SelectTrigger>
+    </slot>
+
+    <SelectPortal>
+      <SelectContent
+        class="select-content group"
+        :style="{
+          'min-width': 'var(--radix-popper-anchor-width)',
+          'max-height': popupPosition === 'popper' ? 'var(--radix-popper-available-height)' : '',
+          'overflow': popupPosition === 'popper' ? 'auto' : '',
+        }"
+        :data-design="popupRound ? 'round' : undefined"
+        :class="popupClass"
+        :position="popupPosition"
+        :side
+        :side-offset
+        :sticky
+        :update-position-strategy
+      >
+        <SelectScrollUpButton class="select-scroll-btn">
+          <VuIcon name="i--chevron-up" class="size-1em" />
+        </SelectScrollUpButton>
+
+        <SelectViewport>
+          <template v-for="(g, grpIndex) of groups" :key="grpIndex">
+            <SelectSeparator v-if="grpIndex > 0" class="select-separator" />
+            <SelectLabel class="select-grp-label" v-if="!!g.grp">
+              <slot name="group" v-bind="g">
+                <span>{{ g.grp }}</span>
+              </slot>
+            </SelectLabel>
+            <SelectGroup>
+              <SelectItem
+                v-for="(item, index) in g.items"
+                :key="index"
+                class="select-item relative"
+                :value="String(item.value)"
+                :disabled="disabled || item.disabled || isItemDisabled(item.value)"
+                :aria-disabled="disabled || item.disabled || isItemDisabled(item.value)"
+              >
+                <SelectItemText class="absolute">
+                  <span class="hidden">
+                    {{ getSearchValue(item) }}
+                  </span>
+                </SelectItemText>
+                <span>
+                  <slot name="item" v-bind="item">
+                    <VuIcon
+                      v-if="!!item.icon"
+                      :name="item.icon"
+                      class="inline-block vertical-middle mr-$xs"
+                      style="color: currentColor"
+                    />
+                    {{ item.label }}
+                  </slot>
+                </span>
+              </SelectItem>
+            </SelectGroup>
+          </template>
+        </SelectViewport>
+
+        <SelectScrollDownButton class="select-scroll-btn">
+          <VuIcon name="i--chevron-down" class="size-1em" />
+        </SelectScrollDownButton>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>

package/src/components/Select/index.ts

@@ -0,0 +1,3 @@
+export { default as VuSelect } from './Select.vue'
+export { default as VuSelectBase } from './SelectBase.vue'
+export * from './types'

package/src/components/Select/shortcuts.ts

@@ -0,0 +1,30 @@
+import { scFromObject } from '../../theme/utils/shortcut-obj'
+
+export const selectShortcuts = {
+  'select-content': scFromObject({
+    '': 'min-w-[60px] rounded-base surface-0 bg-current/70 backdrop-blur-xl overflow-hidden shadow-xl z-[100] current-border-grey-400 border-current/20 ',
+    'data-[design=round]:': 'rounded-fingertip-half',
+    '[&>div[data-radix-combobox-viewport]]:':
+      'max-h-[var(--radix-popper-available-height)] [scrollbar-width:auto]',
+    '[&>div[data-radix-combobox-viewport]::-webkit-scrollbar]:': 'block',
+    // 'data-[side=top]:': 'animate-slide-down-and-fade',
+    // 'data-[side=right]:': 'animate-slide-left-and-fade',
+    // 'data-[side=bottom]:': 'animate-slide-up-and-fade',
+    // 'data-[side=left]:': 'animate-slide-right-and-fade',
+  }),
+  'select-scroll-btn': 'flex items-center justify-center h-fingertip cursor-default',
+  'select-grp-label': scFromObject({
+    '': 'px-$m h-fingertip flex items-center ',
+    'group-data-[design=round]:': 'px-fingertip-half',
+    '[&>span]:': 'text-label text-grey-400',
+  }),
+  'select-item': scFromObject({
+    '': 'text-body leading-none flex items-center h-fingertip relative select-none relative',
+    'data-[disabled]:': 'opacity-40 pointer-events-none',
+    'data-[highlighted]:': 'outline-none bg-scope-color-500/15',
+    '[&>span]:': 'px-$m',
+    'group-data-[design=round]:[&>span]:': 'px-fingertip-half',
+    '[&>span]:data-[state=checked]:': 'text-scope-color-500 fw-700!',
+  }),
+  'select-separator': 'h-[1px] bg-grey-500/10 mx-$s',
+}

package/src/components/Select/types.ts

@@ -0,0 +1,30 @@
+export interface TSelectItem {
+  icon?: string
+  search?: string
+  value: string | null | undefined
+  label?: string
+  disabled?: boolean
+}
+
+export type TSelectItems<T extends TSelectItem = TSelectItem> =
+  | Array<T | string>
+  | Record<string, Array<T | string>>
+
+export interface TSelectBaseProps<T extends TSelectItem> {
+  required?: boolean
+  disabledValues?: Array<string | null | undefined>
+  defaultValue?: string | null | undefined
+  popupClass?: string | Record<string, boolean>
+  popupRound?: boolean
+  valueClass?: string | Record<string, boolean>
+  iconClass?: string | Record<string, boolean>
+  class?: string | Record<string, boolean>
+  items: TSelectItems<T>
+  disabled?: boolean
+  placeholder?: string
+  popupPosition?: 'item-aligned' | 'popper'
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  sideOffset?: number
+  sticky?: 'partial' | 'always'
+  updatePositionStrategy?: 'always' | 'optimized'
+}

package/src/components/Slider/Slider.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
+import { useForwardPropsEmits } from 'radix-vue'
+
+type TClass = string | Record<string, boolean>
+
+const props = defineProps<
+  SliderRootProps & {
+    class?: TClass
+    rootClass?: TClass
+    trackClass?: TClass
+    rangeClass?: TClass
+    hideRange?: boolean
+    thumbs?: number
+    labels?: string[]
+    sliderClass?: TClass | TClass[]
+    label?: string
+    displayValue?: boolean
+  }
+>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const {
+    class: _,
+    rootClass,
+    hideRange,
+    trackClass,
+    rangeClass,
+    thumbs,
+    labels,
+    sliderClass,
+    label,
+    displayValue,
+    ...delegated
+  } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const modelValue = defineModel<number[]>()
+function getSliderClass(n: number) {
+  if (Array.isArray(props.sliderClass)) {
+    return props.sliderClass[n]
+  } else if (props.sliderClass !== undefined) {
+    return props.sliderClass
+  }
+  return undefined
+}
+</script>
+
+<template>
+  <div :class>
+    <div class="flex justify-between" v-if="!!label || displayValue">
+      <VuLabel>{{ label || '' }}</VuLabel>
+      <span class="text-label text-grey-400">{{ modelValue?.join(' | ') }}</span>
+    </div>
+    <SliderRoot v-bind="forwarded" v-model="modelValue" class="slider" :class="rootClass">
+      <SliderTrack :class="trackClass || 'slider-track'">
+        <SliderRange v-if="!hideRange" :class="rangeClass || 'slider-range'" />
+      </SliderTrack>
+
+      <slot>
+        <SliderThumb
+          v-for="n in thumbs || 1"
+          :class="getSliderClass(n) || 'slider-thumb'"
+          :aria-label="labels?.[n]"
+        />
+      </slot>
+    </SliderRoot>
+  </div>
+</template>

package/src/components/Slider/index.ts

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

package/src/components/Slider/shortcuts.ts

@@ -0,0 +1,23 @@
+import { scFromObject } from '../../theme/utils/shortcut-obj'
+
+export const sliderShortcuts = {
+  'slider': scFromObject({
+    '': 'relative flex items-center select-none touch-none min-w-2em min-h-2em',
+  }),
+  'slider-track': scFromObject({
+    '': 'bg-grey-500/20 relative grow rounded-full h-[0.25em]',
+  }),
+  'slider-range': scFromObject({
+    '': 'absolute bg-scope-color-500 rounded-full h-full',
+  }),
+  'slider-thumb': scFromObject({
+    '': 'block w-[1.5em] h-[1.5em] bg-scope-color-500 rounded-full border-scope-light-0 border-[3px] outline-scope-color-500/10 outline-0px outline-solid',
+    'dark:': 'border-scope-dark-0',
+    'not-[[disabled]]:': scFromObject({
+      '': 'cursor-grab',
+      'hover:': 'shadow-md',
+      'active:': 'cursor-grabbing',
+      'focus:': 'outline-[0.5em]',
+    }),
+  }),
+}

package/src/components/shortcuts.ts

@@ -0,0 +1,21 @@
+import { buttonShortcuts } from './Button/shortcuts'
+import { cardShortcuts } from './Card/shortcuts'
+import { checkboxShortcuts } from './Checkbox/shortcuts'
+import { comboboxShortcuts } from './Combobox/shortcuts'
+import { loadingShortcuts } from './Loading/shortcuts'
+import { menuShortcuts } from './Menu/shortcuts'
+import { radioShortcuts } from './RadioGroup/shortcuts'
+import { selectShortcuts } from './Select/shortcuts'
+import { sliderShortcuts } from './Slider/shortcuts'
+
+export const shortcuts = [
+  cardShortcuts,
+  menuShortcuts,
+  buttonShortcuts,
+  checkboxShortcuts,
+  radioShortcuts,
+  selectShortcuts,
+  comboboxShortcuts,
+  sliderShortcuts,
+  loadingShortcuts,
+]