@dolanske/vui 1.0.3 → 1.1.0

package/package.json

@@ -1,72 +1,73 @@
-{
-  "name": "@dolanske/vui",
-  "type": "module",
-  "version": "1.0.3",
-  "private": false,
-  "description": "Brother in Christ there's a new UI library",
-  "author": "dolanske",
-  "license": "GPL-3.0",
-  "sass": "src/index.scss",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/dolanske/vui.git"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "component"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vui.js"
-    },
-    "./style": {
-      "import": "./dist/vui.css",
-      "require": "./dist/vui.css",
-      "default": "./dist/vui.css"
-    }
-  },
-  "main": "./dist/vui.js",
-  "module": "./dist/vui.js",
-  "browser": "./dist/vui.js",
-  "unpkg": "./dist/vui.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "./dist/*",
-    "./src/*",
-    "LICENSE",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "test": "vitest"
-  },
-  "dependencies": {
-    "@floating-ui/vue": "^1.1.6",
-    "@types/node": "^22.13.2",
-    "@vuepic/vue-datepicker": "^11.0.1",
-    "@vueuse/core": "^12.5.0",
-    "sass": "^1.84.0",
-    "vaul-vue": "^0.2.1",
-    "vite-plugin-dts": "^4.5.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "^4.2.0",
-    "@iconify/vue": "^4.3.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.20.1",
-    "eslint-plugin-format": "^1.0.1",
-    "jsdom": "^26.0.0",
-    "typescript": "^5.7.3",
-    "vite": "^6.1.0",
-    "vitest": "^3.0.5",
-    "vue-tsc": "^2.2.0"
-  }
-}
+{
+  "name": "@dolanske/vui",
+  "type": "module",
+  "version": "1.1.0",
+  "private": false,
+  "description": "Brother in Christ there's a new UI library",
+  "author": "dolanske",
+  "license": "GPL-3.0",
+  "sass": "src/index.scss",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dolanske/vui.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "component"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vui.js"
+    },
+    "./style": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css",
+      "default": "./dist/style.css"
+    }
+  },
+  "main": "./dist/vui.js",
+  "module": "./dist/vui.js",
+  "browser": "./dist/vui.js",
+  "unpkg": "./dist/vui.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist/*",
+    "./src/*",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "build:pages": "vue-tsc -b && vite build --mode pages",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.6",
+    "@types/node": "^22.14.1",
+    "@vuepic/vue-datepicker": "^11.0.2",
+    "@vueuse/core": "^13.1.0",
+    "sass": "^1.86.3",
+    "vaul-vue": "^0.4.1",
+    "vite-plugin-dts": "^4.5.3",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.12.0",
+    "@iconify/vue": "^4.3.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.25.0",
+    "eslint-plugin-format": "^1.0.1",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.2",
+    "vitest": "^3.1.1",
+    "vue-tsc": "^2.2.8"
+  }
+}

package/src/App.vue

@@ -1,95 +1,95 @@
-<script setup lang="ts">
-import Divider from './components/Divider/Divider.vue'
-import ExampleAccordions from './examples/ExampleAccordions.vue'
-import ExampleAlerts from './examples/ExampleAlerts.vue'
-import ExampleAvatars from './examples/ExampleAvatars.vue'
-import ExampleBadges from './examples/ExampleBadges.vue'
-import ExampleBreadcrumbs from './examples/ExampleBreadcrumbs.vue'
-import ExampleButtons from './examples/ExampleButtons.vue'
-import ExampleCalendars from './examples/ExampleCalendars.vue'
-import ExampleCards from './examples/ExampleCards.vue'
-import ExampleCheckboxes from './examples/ExampleCheckboxes.vue'
-import ExampleCopyClipboard from './examples/ExampleCopyClipboard.vue'
-import ExampleDividers from './examples/ExampleDividers.vue'
-import ExampleDrawers from './examples/ExampleDrawers.vue'
-import ExampleDropdowns from './examples/ExampleDropdowns.vue'
-import ExampleFlexGrid from './examples/ExampleFlexGrid.vue'
-import ExampleInputs from './examples/ExampleInputs.vue'
-import ExampleKBD from './examples/ExampleKBD.vue'
-import ExampleModals from './examples/ExampleModals.vue'
-import ExamplePalette from './examples/ExamplePalette.vue'
-import ExamplePopouts from './examples/ExamplePopouts.vue'
-import ExampleSheets from './examples/ExampleSheets.vue'
-import ExampleSidebars from './examples/ExampleSidebars.vue'
-import ExampleSkeletons from './examples/ExampleSkeletons.vue'
-import ExampleSpinners from './examples/ExampleSpinners.vue'
-import ExampleTables from './examples/ExampleTables.vue'
-import ExampleTabs from './examples/ExampleTabs.vue'
-import ExampleToasts from './examples/ExampleToasts.vue'
-import ExampleTooltips from './examples/ExampleTooltips.vue'
-</script>
-
-<template>
-  <main vaul-drawer-wrapper>
-    <div class="container container-l p-xl">
-      <h1 class="mb-l">
-        VUI
-      </h1>
-      <p>The purpose of this page is to showcase and test every single component case</p>
-      <Divider :size="64" />
-      <ExamplePalette />
-      <Divider :size="64" />
-      <ExampleButtons />
-      <Divider :size="64" />
-      <ExampleCalendars />
-      <Divider :size="64" />
-      <ExampleBadges />
-      <Divider :size="64" />
-      <ExampleSpinners />
-      <Divider :size="64" />
-      <ExampleAvatars />
-      <Divider :size="64" />
-      <ExampleAlerts />
-      <Divider :size="64" />
-      <ExampleSkeletons />
-      <Divider :size="64" />
-      <ExampleAccordions />
-      <Divider :size="64" />
-      <ExampleBreadcrumbs />
-      <Divider :size="64" />
-      <ExampleCards />
-      <Divider :size="64" />
-      <ExampleCheckboxes />
-      <Divider :size="64" />
-      <ExampleCopyClipboard />
-      <Divider :size="64" />
-      <ExampleTabs />
-      <Divider :size="64" />
-      <ExampleInputs />
-      <Divider :size="64" />
-      <ExampleToasts />
-      <Divider :size="64" />
-      <ExampleTooltips />
-      <Divider :size="64" />
-      <ExampleSheets />
-      <Divider :size="64" />
-      <ExampleModals />
-      <Divider :size="64" />
-      <ExampleDrawers />
-      <Divider :size="64" />
-      <ExampleKBD />
-      <Divider :size="64" />
-      <ExamplePopouts />
-      <Divider :size="64" />
-      <ExampleDividers />
-      <Divider :size="64" />
-      <ExampleDropdowns />
-      <Divider :size="64" />
-      <ExampleFlexGrid />
-      <Divider :size="64" />
-      <ExampleTables />
-      <Divider :size="64" />
-      <ExampleSidebars />
-    </div>
-  </main>
-</template>
+<script setup lang="ts">
+import Divider from './components/Divider/Divider.vue'
+import ExampleAccordions from './examples/ExampleAccordions.vue'
+import ExampleAlerts from './examples/ExampleAlerts.vue'
+import ExampleAvatars from './examples/ExampleAvatars.vue'
+import ExampleBadges from './examples/ExampleBadges.vue'
+import ExampleBreadcrumbs from './examples/ExampleBreadcrumbs.vue'
+import ExampleButtons from './examples/ExampleButtons.vue'
+import ExampleCalendars from './examples/ExampleCalendars.vue'
+import ExampleCards from './examples/ExampleCards.vue'
+import ExampleCheckboxes from './examples/ExampleCheckboxes.vue'
+import ExampleCopyClipboard from './examples/ExampleCopyClipboard.vue'
+import ExampleDividers from './examples/ExampleDividers.vue'
+import ExampleDrawers from './examples/ExampleDrawers.vue'
+import ExampleDropdowns from './examples/ExampleDropdowns.vue'
+import ExampleFlexGrid from './examples/ExampleFlexGrid.vue'
+import ExampleInputs from './examples/ExampleInputs.vue'
+import ExampleKBD from './examples/ExampleKBD.vue'
+import ExampleModals from './examples/ExampleModals.vue'
+import ExamplePalette from './examples/ExamplePalette.vue'
+import ExamplePopouts from './examples/ExamplePopouts.vue'
+import ExampleSheets from './examples/ExampleSheets.vue'
+import ExampleSidebars from './examples/ExampleSidebars.vue'
+import ExampleSkeletons from './examples/ExampleSkeletons.vue'
+import ExampleSpinners from './examples/ExampleSpinners.vue'
+import ExampleTables from './examples/ExampleTables.vue'
+import ExampleTabs from './examples/ExampleTabs.vue'
+import ExampleToasts from './examples/ExampleToasts.vue'
+import ExampleTooltips from './examples/ExampleTooltips.vue'
+</script>
+
+<template>
+  <main vaul-drawer-wrapper>
+    <div class="container container-l p-xl">
+      <h1 class="mb-l">
+        VUI
+      </h1>
+      <p>The purpose of this page is to showcase and test every single component case</p>
+      <Divider :size="64" />
+      <ExamplePalette />
+      <Divider :size="64" />
+      <ExampleButtons />
+      <Divider :size="64" />
+      <ExampleCalendars />
+      <Divider :size="64" />
+      <ExampleBadges />
+      <Divider :size="64" />
+      <ExampleSpinners />
+      <Divider :size="64" />
+      <ExampleAvatars />
+      <Divider :size="64" />
+      <ExampleAlerts />
+      <Divider :size="64" />
+      <ExampleSkeletons />
+      <Divider :size="64" />
+      <ExampleAccordions />
+      <Divider :size="64" />
+      <ExampleBreadcrumbs />
+      <Divider :size="64" />
+      <ExampleCards />
+      <Divider :size="64" />
+      <ExampleCheckboxes />
+      <Divider :size="64" />
+      <ExampleCopyClipboard />
+      <Divider :size="64" />
+      <ExampleTabs />
+      <Divider :size="64" />
+      <ExampleInputs />
+      <Divider :size="64" />
+      <ExampleToasts />
+      <Divider :size="64" />
+      <ExampleTooltips />
+      <Divider :size="64" />
+      <ExampleSheets />
+      <Divider :size="64" />
+      <ExampleModals />
+      <Divider :size="64" />
+      <ExampleDrawers />
+      <Divider :size="64" />
+      <ExampleKBD />
+      <Divider :size="64" />
+      <ExamplePopouts />
+      <Divider :size="64" />
+      <ExampleDividers />
+      <Divider :size="64" />
+      <ExampleDropdowns />
+      <Divider :size="64" />
+      <ExampleFlexGrid />
+      <Divider :size="64" />
+      <ExampleTables />
+      <Divider :size="64" />
+      <ExampleSidebars />
+    </div>
+  </main>
+</template>

package/src/components/Accordion/Accordion.vue

@@ -1,91 +1,91 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { useResizeObserver } from '@vueuse/core'
-import { onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
-import './accordion.scss'
-
-export interface AccordionProps {
-  open?: boolean
-  label?: string
-  card?: boolean
-}
-
-const props = defineProps<AccordionProps>()
-const emits = defineEmits<{
-  open: []
-  close: []
-}>()
-
-const isOpen = ref(false)
-const contentRef = useTemplateRef('content')
-const contentMaxHeight = ref(0)
-
-watchEffect(() => {
-  isOpen.value = props.open
-}, {
-  flush: 'post',
-})
-
-watch(isOpen, (value) => {
-  if (value) {
-    emits('open')
-    contentMaxHeight.value = contentRef.value?.scrollHeight || 0
-  }
-  else {
-    emits('close')
-  }
-}, {
-  flush: 'post',
-  immediate: true,
-})
-
-function open() {
-  isOpen.value = true
-}
-
-function close() {
-  isOpen.value = false
-}
-
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
-defineExpose({
-  open,
-  close,
-  toggle,
-  isOpen,
-})
-
-onMounted(() => {
-  useResizeObserver(contentRef, ([entry]) => {
-    if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
-      contentMaxHeight.value = entry.contentRect.height || 0
-    }
-  })
-})
-</script>
-
-<template>
-  <div class="vui-accordion" :class="{ 'open': isOpen, 'is-card': !!props.card }">
-    <!-- Completely custom header which needs to be styled and implemented by the developer -->
-    <slot v-if="$slots.trigger" name="trigger" :open :close :toggle :is-open />
-    <button v-else class="vui-accordion-header" @click="isOpen = !isOpen">
-      <slot name="header">
-        {{ props.label }}
-      </slot>
-      <Icon icon="ph:caret-down" />
-    </button>
-
-    <div
-      class="vui-accordion-content"
-      :aria-hidden="!isOpen"
-      :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }"
-    >
-      <div ref="content" class="vui-accordtion-content-inner">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useResizeObserver } from '@vueuse/core'
+import { onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
+import './accordion.scss'
+
+export interface AccordionProps {
+  open?: boolean
+  label?: string
+  card?: boolean
+}
+
+const props = defineProps<AccordionProps>()
+const emits = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const isOpen = ref(false)
+const contentRef = useTemplateRef('content')
+const contentMaxHeight = ref(0)
+
+watchEffect(() => {
+  isOpen.value = props.open
+}, {
+  flush: 'post',
+})
+
+watch(isOpen, (value) => {
+  if (value) {
+    emits('open')
+    contentMaxHeight.value = contentRef.value?.scrollHeight || 0
+  }
+  else {
+    emits('close')
+  }
+}, {
+  flush: 'post',
+  immediate: true,
+})
+
+function open() {
+  isOpen.value = true
+}
+
+function close() {
+  isOpen.value = false
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+defineExpose({
+  open,
+  close,
+  toggle,
+  isOpen,
+})
+
+onMounted(() => {
+  useResizeObserver(contentRef, ([entry]) => {
+    if (isOpen.value && contentMaxHeight.value !== entry.contentRect.height) {
+      contentMaxHeight.value = entry.contentRect.height || 0
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="vui-accordion" :class="{ 'open': isOpen, 'is-card': !!props.card }">
+    <!-- Completely custom header which needs to be styled and implemented by the developer -->
+    <slot v-if="$slots.trigger" name="trigger" :open :close :toggle :is-open />
+    <button v-else class="vui-accordion-header" @click="isOpen = !isOpen">
+      <slot name="header">
+        {{ props.label }}
+      </slot>
+      <Icon icon="ph:caret-down" />
+    </button>
+
+    <div
+      class="vui-accordion-content"
+      :aria-hidden="!isOpen"
+      :style="{ 'max-height': isOpen ? `${contentMaxHeight}px` : '0px' }"
+    >
+      <div ref="content" class="vui-accordtion-content-inner">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Accordion/AccordionGroup.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import type { VNode } from 'vue'
-import type { AccordionProps } from './Accordion.vue'
-import type Accordion from './Accordion.vue'
-import { useTemplateRef } from 'vue'
-// Renderless component which is used to house multiple accordions which can be triggered together in some way
-
-interface Props {
-  /**
-   * If set to true, if an accordion opens, all other close
-   */
-  single?: boolean
-}
-
-const props = defineProps<Props>()
-
-const slots = defineSlots<{
-  default: () => Array<VNode & { props: AccordionProps }>
-}>()
-
-const accordionRefs = useTemplateRef<InstanceType<typeof Accordion>[]>('accordion')
-
-function handleAccordionOpen(newIndex: number) {
-  if (!accordionRefs.value || !props.single)
-    return
-
-  accordionRefs.value.forEach((item, index) => {
-    if (index !== newIndex) {
-      item.close()
-    }
-  })
-}
-</script>
-
-<template>
-  <component
-    :is="item"
-    v-for="(item, index) of slots.default()"
-    ref="accordion"
-    :key="item"
-    @open="handleAccordionOpen(index)"
-  />
-</template>
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { AccordionProps } from './Accordion.vue'
+import type Accordion from './Accordion.vue'
+import { useTemplateRef } from 'vue'
+// Renderless component which is used to house multiple accordions which can be triggered together in some way
+
+interface Props {
+  /**
+   * If set to true, if an accordion opens, all other close
+   */
+  single?: boolean
+}
+
+const props = defineProps<Props>()
+
+const slots = defineSlots<{
+  default: () => Array<VNode & { props: AccordionProps }>
+}>()
+
+const accordionRefs = useTemplateRef<InstanceType<typeof Accordion>[]>('accordion')
+
+function handleAccordionOpen(newIndex: number) {
+  if (!accordionRefs.value || !props.single)
+    return
+
+  accordionRefs.value.forEach((item, index) => {
+    if (index !== newIndex) {
+      item.close()
+    }
+  })
+}
+</script>
+
+<template>
+  <component
+    :is="item"
+    v-for="(item, index) of slots.default()"
+    ref="accordion"
+    :key="item"
+    @open="handleAccordionOpen(index)"
+  />
+</template>