@nexxtmove/ui 0.1.56 → 0.1.57

package/dist/nuxt.js

@@ -1,13 +1,13 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", m = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", r = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", d = "components/Chip/Chip.vue", l = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", T = "components/DoughnutChart/DoughnutChart.vue", P = "components/DropdownButton/DropdownButton.vue", S = "components/Header/Header.vue", h = "components/Icon/Icon.vue", I = "components/InfoBlock/InfoBlock.vue", f = "components/InputField/InputField.vue", g = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", k = "components/ProgressBar/ProgressBar.vue", B = "components/PropertyCard/PropertyCard.vue", D = "components/PropertyListing/PropertyListing.vue", A = "components/SocialIcons/SocialIcons.vue", H = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", w = "components/SocialMediaTemplate/SocialMediaTemplate.vue", E = "components/SocialMediaType/SocialMediaType.vue", F = "components/Source/Source.vue", J = "components/StepperHeader/StepperHeader.vue", L = "components/TabbedContent/TabbedContent.vue", j = "components/Table/Table.vue", $ = "components/Tabs/Tabs.vue", K = "components/TimelineEvent/TimelineEvent.vue", O = "components/TimelinePhaseblock/TimelinePhaseblock.vue", U = "components/Tooltip/Tooltip.vue", _ = {
+const x = "components/AnimatedNumber/AnimatedNumber.vue", r = "components/Avatar/Avatar.vue", i = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", u = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", d = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", T = "components/DoughnutChart/DoughnutChart.vue", P = "components/DropdownButton/DropdownButton.vue", S = "components/Header/Header.vue", h = "components/Icon/Icon.vue", k = "components/InfoBlock/InfoBlock.vue", I = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", g = "components/PresenceIndicator/PresenceIndicator.vue", M = "components/ProgressBar/ProgressBar.vue", B = "components/PropertyCard/PropertyCard.vue", D = "components/PropertyListing/PropertyListing.vue", A = "components/Skeleton/Skeleton.vue", H = "components/SkeletonPropertyCard/SkeletonPropertyCard.vue", w = "components/SocialIcons/SocialIcons.vue", E = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", F = "components/SocialMediaTemplate/SocialMediaTemplate.vue", J = "components/SocialMediaType/SocialMediaType.vue", L = "components/Source/Source.vue", j = "components/StepperHeader/StepperHeader.vue", $ = "components/TabbedContent/TabbedContent.vue", K = "components/Table/Table.vue", O = "components/Tabs/Tabs.vue", U = "components/TimelineEvent/TimelineEvent.vue", _ = "components/TimelinePhaseblock/TimelinePhaseblock.vue", q = "components/Tooltip/Tooltip.vue", z = {
   NexxtAnimatedNumber: x,
-  NexxtAvatar: i,
-  NexxtButton: m,
-  NexxtCalendar: u,
-  NexxtCard: r,
+  NexxtAvatar: r,
+  NexxtButton: i,
+  NexxtCalendar: m,
+  NexxtCard: u,
   NexxtCheckbox: p,
-  NexxtChip: d,
-  NexxtCombobox: l,
+  NexxtChip: l,
+  NexxtCombobox: d,
   NexxtComboboxPanel: v,
   NexxtContactInfoCard: C,
   NexxtCustomerJourneyTile: N,
@@ -16,27 +16,29 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   NexxtDropdownButton: P,
   NexxtHeader: S,
   NexxtIcon: h,
-  NexxtInfoBlock: I,
-  NexxtInputField: f,
-  NexxtModal: g,
+  NexxtInfoBlock: k,
+  NexxtInputField: I,
+  NexxtModal: f,
   NexxtPagination: y,
-  NexxtPresenceIndicator: M,
-  NexxtProgressBar: k,
+  NexxtPresenceIndicator: g,
+  NexxtProgressBar: M,
   NexxtPropertyCard: B,
   NexxtPropertyListing: D,
-  NexxtSocialIcons: A,
-  NexxtSocialMediaCustomTemplate: H,
-  NexxtSocialMediaTemplate: w,
-  NexxtSocialMediaType: E,
-  NexxtSource: F,
-  NexxtStepperHeader: J,
-  NexxtTabbedContent: L,
-  NexxtTable: j,
-  NexxtTabs: $,
-  NexxtTimelineEvent: K,
-  NexxtTimelinePhaseblock: O,
-  NexxtTooltip: U
-}, z = c({
+  NexxtSkeleton: A,
+  NexxtSkeletonPropertyCard: H,
+  NexxtSocialIcons: w,
+  NexxtSocialMediaCustomTemplate: E,
+  NexxtSocialMediaTemplate: F,
+  NexxtSocialMediaType: J,
+  NexxtSource: L,
+  NexxtStepperHeader: j,
+  NexxtTabbedContent: $,
+  NexxtTable: K,
+  NexxtTabs: O,
+  NexxtTimelineEvent: U,
+  NexxtTimelinePhaseblock: _,
+  NexxtTooltip: q
+}, Q = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -48,7 +50,7 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(_))
+    for (const [t, n] of Object.entries(z))
       s({
         name: t,
         export: "default",
@@ -67,5 +69,5 @@ const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar
   }
 });
 export {
-  z as default
+  Q as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+defineOptions({ name: 'NexxtSkeleton' })
+</script>
+
+<template>
+  <div class="animate-pulse rounded bg-gray-200" />
+</template>

package/src/components/SkeletonPropertyCard/SkeletonPropertyCard.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import NexxtSkeleton from '../Skeleton/Skeleton.vue'
+
+export interface NexxtSkeletonPropertyCardProps {
+  ariaLabel?: string
+}
+
+defineOptions({ name: 'NexxtSkeletonPropertyCard' })
+
+withDefaults(defineProps<NexxtSkeletonPropertyCardProps>(), {
+  ariaLabel: 'Woning wordt geladen...',
+})
+</script>
+
+<template>
+  <div
+    class="inline-flex w-80 flex-col items-start justify-start rounded-t-lg bg-white"
+    role="status"
+    :aria-label="ariaLabel"
+  >
+    <NexxtSkeleton class="h-40 w-full rounded-tl-lg rounded-tr-lg rounded-b-none" />
+
+    <div
+      class="box-border flex w-full flex-col gap-2 rounded-b-lg border border-gray-200 px-4 py-2"
+    >
+      <div class="flex items-center gap-2">
+        <NexxtSkeleton class="h-4 w-24" />
+        <NexxtSkeleton class="h-4 w-4" />
+        <NexxtSkeleton class="h-4 w-28" />
+      </div>
+
+      <NexxtSkeleton class="h-4 w-36" />
+    </div>
+  </div>
+</template>

package/src/components.json

@@ -23,6 +23,8 @@
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
   "NexxtPropertyCard": "components/PropertyCard/PropertyCard.vue",
   "NexxtPropertyListing": "components/PropertyListing/PropertyListing.vue",
+  "NexxtSkeleton": "components/Skeleton/Skeleton.vue",
+  "NexxtSkeletonPropertyCard": "components/SkeletonPropertyCard/SkeletonPropertyCard.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",
   "NexxtSocialMediaCustomTemplate": "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
   "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",

package/src/index.ts

@@ -23,6 +23,8 @@ export { default as NexxtPresenceIndicator } from './components/PresenceIndicato
 export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'
 export { default as NexxtPropertyCard } from './components/PropertyCard/PropertyCard.vue'
 export { default as NexxtPropertyListing } from './components/PropertyListing/PropertyListing.vue'
+export { default as NexxtSkeleton } from './components/Skeleton/Skeleton.vue'
+export { default as NexxtSkeletonPropertyCard } from './components/SkeletonPropertyCard/SkeletonPropertyCard.vue'
 export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'
 export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue'
 export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'