@nexxtmove/ui 1.8.1 → 1.10.0

package/dist/nuxt.js

@@ -13,6 +13,7 @@ var s = {
 	NexxtIcon: "components/atoms/Icon/Icon.vue",
 	NexxtPresenceIndicator: "components/atoms/PresenceIndicator/PresenceIndicator.vue",
 	NexxtPropertyListing: "components/atoms/PropertyListing/PropertyListing.vue",
+	NexxtSelectableOption: "components/atoms/SelectableOption/SelectableOption.vue",
 	NexxtSkeleton: "components/atoms/Skeleton/Skeleton.vue",
 	NexxtSlider: "components/atoms/Slider/Slider.vue",
 	NexxtSquircle: "components/atoms/Squircle/Squircle.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -84,7 +84,6 @@
     "build": "vite build",
     "format": "prettier --write .",
     "generate:index": "node --experimental-strip-types ./scripts/generate-index.ts",
-    "version": "node --experimental-strip-types ./scripts/changelog.ts && git add CHANGELOG.md",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "storybook": "storybook dev -p 6006 --no-open",

package/src/components/atoms/SelectableOption/SelectableOption.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import NexxtIcon from '../Icon/Icon.vue'
+
+interface NexxtSelectableOptionProps {
+  /** Whether this option is currently chosen. */
+  selected?: boolean
+  /** Disables the option, so it can no longer be chosen. */
+  disabled?: boolean
+  /** Corner radius. Tile pickers use `xl`, compact rows of choices use `lg`. */
+  rounded?: 'lg' | 'xl' | '3xl'
+  /** Shows a check badge in the top-right corner while selected. For cards; compact rows of choices do without. */
+  checkmark?: boolean
+}
+
+defineOptions({
+  name: 'NexxtSelectableOption',
+})
+
+const {
+  selected = false,
+  disabled = false,
+  rounded = 'xl',
+  checkmark = false,
+} = defineProps<NexxtSelectableOptionProps>()
+
+// Content often styles itself by the selection too -- an icon or label that
+// changes colour -- so the state is handed to the slot rather than kept inside.
+defineSlots<{ default(props: { selected: boolean }): unknown }>()
+
+// The template must stay single-root: a leading comment would turn it into a
+// fragment, and then class, disabled and aria-pressed no longer reach the
+// button. type="button" so an option inside a form never submits it.
+
+// Written out in full so Tailwind can find every class in the source.
+const RADIUS = {
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  '3xl': 'rounded-3xl',
+} as const
+</script>
+
+<template>
+  <button
+    type="button"
+    :disabled="disabled"
+    :aria-pressed="selected"
+    class="border transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+    :class="[
+      RADIUS[rounded],
+      checkmark && 'relative',
+      selected
+        ? 'border-cornflower-blue-500 bg-cornflower-blue-50 text-cornflower-blue-700'
+        : 'border-gray-200 bg-white text-neutral-700 hover:border-gray-300 hover:bg-gray-50',
+    ]"
+  >
+    <slot :selected="selected" />
+    <span
+      v-if="checkmark && selected"
+      class="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow"
+    >
+      <NexxtIcon name="check" type="solid" class="text-xs" />
+    </span>
+  </button>
+</template>

package/src/components.json

@@ -10,6 +10,7 @@
   "NexxtIcon": "components/atoms/Icon/Icon.vue",
   "NexxtPresenceIndicator": "components/atoms/PresenceIndicator/PresenceIndicator.vue",
   "NexxtPropertyListing": "components/atoms/PropertyListing/PropertyListing.vue",
+  "NexxtSelectableOption": "components/atoms/SelectableOption/SelectableOption.vue",
   "NexxtSkeleton": "components/atoms/Skeleton/Skeleton.vue",
   "NexxtSlider": "components/atoms/Slider/Slider.vue",
   "NexxtSquircle": "components/atoms/Squircle/Squircle.vue",

package/src/index.ts

@@ -9,6 +9,7 @@ export type {
   TimelinePhase,
   TimelineResponse,
 } from './components/molecules/TimelineEvent/TimelineTypes'
+export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLabel.vue'
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
@@ -46,6 +47,7 @@ export { default as NexxtPropertyCard } from './components/molecules/PropertyCar
 export { default as NexxtPropertyListing } from './components/atoms/PropertyListing/PropertyListing.vue'
 export { default as NexxtReferenceCard } from './components/organisms/ReferenceCard/ReferenceCard.vue'
 export { default as NexxtSelect } from './components/molecules/Select/Select.vue'
+export { default as NexxtSelectableOption } from './components/atoms/SelectableOption/SelectableOption.vue'
 export { default as NexxtSidebarMenuItem } from './components/molecules/SidebarMenuItem/SidebarMenuItem.vue'
 export { default as NexxtSkeleton } from './components/atoms/Skeleton/Skeleton.vue'
 export { default as NexxtSkeletonPropertyCard } from './components/molecules/SkeletonPropertyCard/SkeletonPropertyCard.vue'