vunor 0.0.2

package/dist/vite.d.ts

@@ -0,0 +1,5 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+export declare const VunorVueResolver: ComponentResolver;
+
+export { }

package/dist/vite.mjs

@@ -0,0 +1,13 @@
+const u = (r) => {
+  if (r.startsWith("Vu")) {
+    const s = r.slice(2);
+    return {
+      name: "default",
+      as: r,
+      from: `vunor/${s}.vue`
+    };
+  }
+};
+export {
+  u as VunorVueResolver
+};

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "vunor",
+  "version": "0.0.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build-with-checks": "run-p type-check \"build {@}\" --",
+    "preview": "vite preview",
+    "build": "vite build",
+    "pub": "npm publish --access public",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@prostojs/palitra": "^0.0.3",
+    "@unocss/preset-mini": "^0.60.4",
+    "defu": "^6.1.4",
+    "radix-vue": "^1.8.3",
+    "unocss": "^0.60.4",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
+  },
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./theme": {
+      "import": "./dist/theme.mjs",
+      "types": "./dist/theme.d.ts"
+    },
+    "./vite": {
+      "import": "./dist/vite.mjs",
+      "types": "./dist/vite.d.ts"
+    },
+    "./Input.vue": "./src/components/Input/Input.vue",
+    "./InputBase.vue": "./src/components/Input/InputBase.vue",
+    "./Button.vue": "./src/components/Button/Button.vue",
+    "./ButtonBase.vue": "./src/components/Button/ButtonBase.vue",
+    "./AppLayout.vue": "./src/components/AppLayout/AppLayout.vue",
+    "./Card.vue": "./src/components/Card/Card.vue",
+    "./CardHeader.vue": "./src/components/Card/CardHeader.vue",
+    "./CardInner.vue": "./src/components/Card/CardInner.vue",
+    "./Checkbox.vue": "./src/components/Checkbox/Checkbox.vue",
+    "./Combobox.vue": "./src/components/Combobox/Combobox.vue",
+    "./Icon.vue": "./src/components/Icon/Icon.vue",
+    "./InputShell.vue": "./src/components/Input/InputShell.vue",
+    "./Label.vue": "./src/components/Label/Label.vue",
+    "./LoadingIndicator.vue": "./src/components/Loading/LoadingIndicator.vue",
+    "./Menu.vue": "./src/components/Menu/Menu.vue",
+    "./MenuItem.vue": "./src/components/Menu/MenuItem.vue",
+    "./OverflowContainer.vue": "./src/components/OverflowContainer/OverflowContainer.vue",
+    "./Pagination.vue": "./src/components/Pagination/Pagination.vue",
+    "./Popover.vue": "./src/components/Popover/Popover.vue",
+    "./RadioGroup.vue": "./src/components/RadioGroup/RadioGroup.vue",
+    "./Select.vue": "./src/components/Select/Select.vue",
+    "./SelectBase.vue": "./src/components/Select/SelectBase.vue",
+    "./Slider.vue": "./src/components/Slider/Slider.vue",
+    "./utils": "./src/components/utils/index.ts"
+  },
+  "devDependencies": {
+    "@iconify/utils": "^2.1.23",
+    "@prostojs/palitra": "^0.0.3",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.5",
+    "@unocss/preset-icons": "^0.59.4",
+    "@unocss/preset-mini": "^0.59.4",
+    "@unocss/preset-wind": "^0.59.4",
+    "@unocss/reset": "^0.59.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^10.10.0",
+    "typescript": "~5.4.5",
+    "unocss": "^0.60.4",
+    "unocss-preset-scrollbar": "^0.3.1",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-vue-components": "^0.27.0",
+    "vite": "^5.2.8",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.11"
+  }
+}

package/src/components/AppLayout/AppLayout.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    maxW?: string
+    headerH?: string
+    footerH?: string
+    leftW?: string
+    rightW?: string
+    footer?: boolean
+    header?: boolean
+    left?: boolean
+    right?: boolean
+    headerClass?: string | Record<string, boolean>
+    footerClass?: string | Record<string, boolean>
+    leftClass?: string | Record<string, boolean>
+    rightClass?: string | Record<string, boolean>
+    mainClass?: string | Record<string, boolean>
+    scrollTopOnChangeView?: boolean
+  }>(),
+  {
+    maxW: '90rem',
+    headerH: '3rem',
+    footerH: '3rem',
+    leftW: '14rem',
+    rightW: '14rem',
+  }
+)
+
+const vars = computed(() =>
+  [
+    `--app-max-w: ${props.maxW}`,
+    `--app-header-h: ${props.header ? props.headerH : '0rem'}`,
+    `--app-footer-h: ${props.footer ? props.footerH : '0rem'}`,
+    `--app-left-w: ${props.left ? props.leftW : '0rem'}`,
+    `--app-right-w: ${props.right ? props.rightW : '0rem'}`,
+  ].join(';')
+)
+
+const mainScroll = ref<HTMLDivElement>()
+const main = ref<HTMLDivElement>()
+
+let observer: MutationObserver
+
+const autoScroll: MutationCallback = (changes: MutationRecord[]) => {
+  if (changes.length && changes.some(c => c.type === 'childList') && mainScroll.value) {
+    mainScroll.value.scroll({ top: 0, left: 0 })
+  }
+}
+
+onMounted(() => {
+  if (props.scrollTopOnChangeView && main.value) {
+    observer = new MutationObserver(autoScroll)
+    observer.observe(main.value, {
+      childList: true,
+      subtree: false,
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (observer) {
+    observer.disconnect()
+  }
+})
+</script>
+
+<template>
+  <div class="h-screen w-full flex flex-col items-center" :style="vars">
+    <div ref="mainScroll" class="flex-1 overflow-y-scroll overflow-x-auto w-full thin-scrollbar">
+      <header
+        v-if="header"
+        class="sticky top-0 flex-shrink-0 h-[var(--app-header-h)] w-full flex"
+        :class="headerClass"
+      >
+        <div class="mx-auto max-w-[var(--app-max-w)] flex items-center justify-between w-full">
+          <slot name="header"></slot>
+        </div>
+      </header>
+
+      <div class="max-w-[var(--app-max-w)] w-full mx-auto flex">
+        <aside
+          class="hidden lg:block w-[var(--app-left-w)] top-[var(--app-header-h)] overflow-auto fixed"
+          :style="'height: calc(100vh - var(--app-header-h) - var(--app-footer-h))'"
+        >
+          <div class="min-h-full" :class="leftClass">
+            <slot name="left"></slot>
+          </div>
+        </aside>
+
+        <main
+          class="flex-1 overflow-auto lg:pl-[var(--app-left-w)] lg:pr-[var(--app-right-w)]"
+          :class="mainClass"
+          ref="main"
+        >
+          <slot></slot>
+        </main>
+
+        <aside
+          class="hidden xl:block w-[var(--app-right-w)] top-[var(--app-header-h)] overflow-auto fixed"
+          :class="rightClass"
+          :style="'height: calc(100vh - var(--app-header-h) - var(--app-footer-h)); left: calc(50% - var(--app-right-w) + min(var(--app-max-w), 100vw) / 2);'"
+        >
+          <slot name="right"></slot>
+        </aside>
+      </div>
+    </div>
+
+    <footer v-if="footer" class="flex-shrink-0 h-[var(--app-footer-h)] px-4 w-full flex">
+      <div class="mx-auto max-w-[var(--app-max-w)] flex items-center justify-between w-full">
+        footer
+      </div>
+    </footer>
+  </div>
+</template>

package/src/components/Button/Button.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+
+const props = defineProps<{
+  label?: string
+  icon?: string
+  iconSide?: 'left' | 'right'
+  loading?: boolean
+  disabled?: boolean
+  active?: boolean
+  pressed?: boolean
+  selected?: boolean
+  to?: RouteLocationRaw
+  class?: string | Record<string, boolean>
+  style?: string | Record<string, string>
+  asLink?: boolean
+}>()
+</script>
+
+<template>
+  <RouterLink v-if="!!to" custom :to v-slot="{ isActive, href }">
+    <VuButtonBase as="a" :href :aria-selected="isActive" v-bind="props">
+      <template #icon-left v-if="$slots['icon-left']">
+        <slot name="icon-left"></slot>
+      </template>
+      <slot></slot>
+      <template #icon-right v-if="$slots['icon-right']">
+        <slot name="icon-right"></slot>
+      </template>
+    </VuButtonBase>
+  </RouterLink>
+
+  <VuButtonBase
+    v-else
+    :as="asLink ? 'a' : 'button'"
+    v-bind="props"
+    :data-active="active ? '' : undefined"
+    :aria-pressed="typeof pressed === 'boolean' ? pressed : undefined"
+    :aria-selected="typeof selected === 'boolean' ? selected : undefined"
+  >
+    <template #icon-left v-if="$slots['icon-left']">
+      <slot name="icon-left"></slot>
+    </template>
+    <slot></slot>
+    <template #icon-right v-if="$slots['icon-right']">
+      <slot name="icon-right"></slot>
+    </template>
+  </VuButtonBase>
+</template>

package/src/components/Button/ButtonBase.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label?: string
+    icon?: string
+    iconSide?: 'left' | 'right'
+    loading?: boolean
+    disabled?: boolean
+    as?: string
+    href?: string
+  }>(),
+  {
+    iconSide: 'left',
+    as: 'button',
+  }
+)
+</script>
+
+<template>
+  <Primitive
+    class="btn group/btn"
+    :as
+    :href
+    :data-has-label="!!label || !!$slots.default"
+    :data-has-icon="!!icon"
+    :data-loading="loading ? '' : undefined"
+    :disabled="loading || disabled || undefined"
+  >
+    <div class="loading-indicator-wrapper" v-if="loading">
+      <VuLoadingIndicator />
+    </div>
+    <slot name="icon-left">
+      <VuIcon v-if="icon && iconSide === 'left'" :name="icon" class="btn-icon btn-icon-left" />
+    </slot>
+    <slot>
+      <span class="btn-label">{{ label }}</span>
+    </slot>
+
+    <slot name="icon-right">
+      <VuIcon v-if="icon && iconSide === 'right'" :name="icon" class="btn-icon btn-icon-right" />
+    </slot>
+  </Primitive>
+</template>

package/src/components/Button/index.ts

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

package/src/components/Button/shortcuts.ts

@@ -0,0 +1,29 @@
+import { scFromObject } from '../../theme/utils/shortcut-obj'
+
+export const buttonShortcuts = {
+  'btn': scFromObject({
+    '': 'h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative',
+    '[&.btn-round]:': 'px-fingertip-half rounded-fingertip-half',
+    '[&.btn-square]:': 'size-fingertip px-0',
+    '[&.btn-round.btn-square]:': 'px-0',
+    'disabled:': 'opacity-80 cursor-not-allowed',
+    '[&>span]:data-[loading]:': 'opacity-0 pointer-events-none',
+    '[&>div:not(.loading-indicator-wrapper)]:data-[loading]:': 'opacity-0 pointer-events-none',
+    '[&>.loading-indicator-wrapper]:':
+      'absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center cursor-wait',
+  }),
+  'btn-square': scFromObject({
+    '': '',
+  }),
+  'btn-label': scFromObject({
+    '': 'lh-1em ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible',
+    'group-[.btn-square]/btn:': 'hidden',
+  }),
+  'btn-icon': scFromObject({
+    '': 'size-1em font-size-1.25em',
+    'group-[.btn-round]/btn:[&.btn-icon-left]:': 'ml-[-0.5em]',
+    'group-[.btn-round]/btn:[&.btn-icon-right]:': 'mr-[-0.5em]',
+    'group-[.btn-square]/btn:': 'font-size-1.5em m-0!',
+    'group-[.btn-round.btn-square]/btn:': 'm-0!',
+  }),
+}

package/src/components/Card/Card.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useCardPI } from './pi'
+
+const props = withDefaults(
+  defineProps<{
+    as?: string
+    asChild?: boolean
+    noPadding?: boolean
+    level?:
+      | 'h1'
+      | 'h2'
+      | 'h3'
+      | 'h4'
+      | 'h5'
+      | 'h6'
+      | 'subheading'
+      | 'body-l'
+      | 'body'
+      | 'body-s'
+      | 'callout'
+    dense?: boolean
+    rounded?: boolean
+  }>(),
+  {
+    as: 'div',
+  }
+)
+
+const { headerLevel } = useCardPI().provide()
+
+const _level = computed(() => props.level || headerLevel.value || 'h6')
+</script>
+
+<template>
+  <Primitive
+    :as
+    :asChild
+    :data-rounded="rounded"
+    :data-dense="dense"
+    :data-level="_level"
+    :style="noPadding ? 'padding: 0' : ''"
+    class="card"
+  >
+    <slot />
+  </Primitive>
+</template>
+./pi

package/src/components/Card/CardHeader.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useCardPI } from './pi'
+
+const props = defineProps<{
+  as?: string
+  asChild?: boolean
+  level?: string
+}>()
+
+const _as = computed(() =>
+  props.as
+    ? props.as
+    : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(props.level || '')
+      ? props.level
+      : 'h6'
+)
+
+useCardPI().inject()
+</script>
+
+<template>
+  <Primitive :as="_as" :asChild class="text-card-header text-mt-0">
+    <slot></slot>
+  </Primitive>
+</template>
+./pi

package/src/components/Card/CardInner.vue

@@ -0,0 +1,5 @@
+<template>
+  <Primitive class="p-$card-spacing">
+    <slot></slot>
+  </Primitive>
+</template>

package/src/components/Card/index.ts

@@ -0,0 +1,3 @@
+export { default as VuCard } from './Card.vue'
+export { default as VuCardHeader } from './CardHeader.vue'
+export { default as VuCardInner } from './CardInner.vue'

package/src/components/Card/pi.ts

@@ -0,0 +1,46 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+
+import { useProvideInject } from '../utils'
+
+const safeTag = (t?: string) => (t && /^h[1-6]$/.test(t) ? t : '')
+
+export const useCardPI = () =>
+  useProvideInject('__vunor_card_PI', () => {
+    const headerLevel = ref('')
+
+    function updateCardLevel(v: string) {
+      if (v) {
+        headerLevel.value = v
+      }
+    }
+
+    return {
+      _provide: () => ({ headerLevel }),
+      _inject: () => {
+        const instance = getCurrentInstance()
+        if (instance) {
+          const v2 = (instance.props.level || safeTag(instance.props.as as string)) as string
+          if (v2) {
+            updateCardLevel(v2)
+          } else {
+            onMounted(() => {
+              const v = (instance.props.level || safeTag(instance.props.as as string)) as string
+              const tag = instance.vnode.el?.tagName.toLowerCase()
+              updateCardLevel(v || safeTag(tag) ? tag : '')
+            })
+          }
+          watch(
+            () => [instance.props.level, instance.props.as],
+            () => {
+              updateCardLevel((instance.props.level || instance.props.as) as string)
+            }
+          )
+        }
+      },
+    }
+  })

package/src/components/Card/shortcuts.ts

@@ -0,0 +1,19 @@
+const headers = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'subheading',
+  'body-l',
+  'body',
+  'body-s',
+  'callout',
+]
+
+export const cardShortcuts = {
+  card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${headers
+    .map(h => `data-[level=${h}]:card-${h}`)
+    .join(' ')}`,
+}

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const modelValue = defineModel<boolean | undefined | 'indeterminate'>()
+defineProps<{
+  label?: string
+  disabled?: boolean
+  error?: string | boolean
+  required?: boolean
+  verticalMiddle?: boolean
+  reverse?: boolean
+  readonly?: boolean
+}>()
+</script>
+
+<template>
+  <!-- [&>.checkbox]:hover:bg-neutral-100 -->
+  <div>
+    <label
+      :style="{
+        'pointer-events': readonly ? 'none' : undefined,
+      }"
+      :aria-disabled="disabled"
+      class="checkbox-root group/cb"
+      :aria-readonly="readonly || undefined"
+      :data-error="!!error"
+      :class="{
+        'items-center': verticalMiddle,
+        'items-start': !verticalMiddle,
+        'flex-row-reverse': reverse,
+      }"
+    >
+      <CheckboxRoot
+        :disabled
+        :required="true"
+        :aria-required="required"
+        v-model:checked="modelValue"
+        :tabindex="readonly ? '-1' : undefined"
+        class="checkbox"
+        :aria-readonly="readonly || undefined"
+      >
+        <CheckboxIndicator class="checkbox-indicator">
+          <VuIcon v-if="modelValue === 'indeterminate'" name="i--dash" class="checkbox-icon" />
+          <VuIcon v-if="modelValue === true" name="i--checkmark" class="checkbox-icon" />
+        </CheckboxIndicator>
+      </CheckboxRoot>
+      <span class="checkbox-label">
+        <slot :label="label">
+          {{ label }}
+        </slot>
+      </span>
+    </label>
+    <div
+      v-if="!!error && typeof error === 'string'"
+      class="text-caption text-error-500 text-mt-$s"
+      :class="{ 'text-right': reverse }"
+    >
+      {{ error }}
+    </div>
+  </div>
+</template>

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/shortcuts.ts

@@ -0,0 +1,27 @@
+import { scFromObject } from '../../theme/utils/shortcut-obj'
+
+export const checkboxShortcuts = {
+  'checkbox-root': scFromObject({
+    '': 'text-body select-none flex gap-$m cursor-default current-bg-scope-color-500 current-border-scope-color-500',
+    'data-[error=true]:': 'current-border-error-500',
+    'aria-[disabled=true]:': 'scope-grey opacity-50 cursor-not-allowed',
+  }),
+  'checkbox': scFromObject({
+    '': 'cursor-default shrink-0 select-none rounded-[0.28em] transition-all transition-duration-100 flex size-1.5em appearance-none items-center justify-center bg-current/0 backdrop-blur-sm border-current border-[0.16em] current-icon-white',
+    'group-active/cb:enabled:':
+      'current-bg-scope-color-500 bg-current/20 current-icon-scope-color-500',
+    // 'group-hover/cb:enabled:': 'border-current',
+    'disabled:': 'cursor-not-allowed border-1px backdrop-blur-sm',
+    'group-[[data-error=true]]/cb:enabled:': 'current-border-error-500 border-current',
+    'data-[state=unchecked]': 'current-border-grey-500 border-current/40',
+  }),
+  'checkbox-indicator': scFromObject({
+    '': 'bg-current icon-current h-full w-full flex items-center justify-center',
+  }),
+  'checkbox-icon': scFromObject({
+    '': 'size-0.9em animate-cb-appear animate-duration-200 animate-ease',
+  }),
+  'checkbox-label': scFromObject({
+    '': 'select-none text-body lh-1.5em',
+  }),
+}