pxd 0.0.64 → 0.1.3

package/dist/components/choicebox/index.vue

@@ -1,49 +1,71 @@
 <script setup>
-import { computed, markRaw } from "vue";
-import { provideChoiceboxContext } from "../../contexts/choicebox";
-import PCheckboxGroup from "../checkbox-group/index.vue";
+import { provideChoiceboxContext } from "../../contexts/choicebox.js";
+import { getUniqueId } from "../../utils/helper.js";
 import PChoiceboxItem from "../choicebox-item/index.vue";
-import PRadioGroup from "../radio-group/index.vue";
+import PStack from "../stack/index.vue";
 defineOptions({
-  name: "PChoicebox",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PChoicebox",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  gap: { type: [Number, String, Object], required: false, default: 3 },
-  label: { type: [String, Number, Array, null], required: false },
-  multiple: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  options: { type: Array, required: false },
-  modelValue: { type: [String, Number, Boolean, Array], required: false }
+	gap: {
+		type: [
+			Number,
+			String,
+			Object
+		],
+		required: false,
+		default: 3
+	},
+	label: {
+		type: null,
+		required: false
+	},
+	multiple: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Array
+		],
+		required: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const renderAs = computed(() => markRaw(props.multiple ? PCheckboxGroup : PRadioGroup));
-function onUpdateModelValue(value) {
-  emits("change", value);
-  emits("update:modelValue", value);
-}
-provideChoiceboxContext({ props, emits });
+provideChoiceboxContext({
+	props,
+	emits,
+	name: getUniqueId()
+});
 </script>
 
 <template>
-  <Component
-    :is="renderAs"
+  <PStack
+    data-choicebox
+    aria-label="Choicebox Group"
     :gap="gap"
-    :options="options"
-    :disabled="disabled"
-    :model-value="modelValue"
     :aria-multiselectable="multiple"
-    class="pxd-choicebox w-full"
     :role="multiple ? 'group' : 'radiogroup'"
+    class="pxd-choicebox"
     v-bind="$attrs"
-    @update:model-value="onUpdateModelValue"
   >
     <slot>
       <PChoiceboxItem v-for="option in options" :key="option.value" v-bind="option" />
     </slot>
-  </Component>
+  </PStack>
 </template>

package/dist/components/choicebox/types.d.ts

@@ -3,7 +3,7 @@ import type {
   ComponentValue,
   ComponentOption,
   ResponsiveValue,
-} from '../../types/shared'
+} from '../../types/shared/props'
 
 export interface ChoiceboxProps {
   gap?: ResponsiveValue<number | string>

package/dist/components/choicebox-item/index.d.vue.ts

@@ -1,11 +1,13 @@
-import type { ChoiceboxProps } from './types';
-declare var __VLS_8: {}, __VLS_10: {};
+import type { ChoiceboxItemProps } from './types';
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_8) => any;
+    label?: (props: typeof __VLS_6) => any;
 } & {
-    description?: (props: typeof __VLS_10) => any;
+    description?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ChoiceboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChoiceboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<ChoiceboxItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChoiceboxItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/choicebox-item/index.vue

@@ -1,67 +1,186 @@
 <script setup>
-import { computed, markRaw } from "vue";
-import { useChoiceboxContext } from "../../contexts/choicebox";
-import PCheckbox from "../checkbox/index.vue";
-import PRadio from "../radio/index.vue";
+import CheckIcon from "@gdsicon/vue/check";
+import { computed } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useChoiceboxContext } from "../../contexts/choicebox.js";
+import { toArray } from "../../utils/format.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PChoiceboxItem",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PChoiceboxItem",
+	inheritAttrs: false
 });
-defineProps({
-  label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number, Boolean], required: false },
-  disabled: { type: Boolean, required: false },
-  description: { type: String, required: false }
+const props = defineProps({
+	label: {
+		type: null,
+		required: false
+	},
+	value: {
+		type: [String, Number],
+		required: true
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	description: {
+		type: String,
+		required: false
+	}
 });
+const inputId = getUniqueId();
+const internalId = getUniqueId();
 const choiceboxGroupContext = useChoiceboxContext();
-const renderAs = computed(() => markRaw(choiceboxGroupContext?.props.multiple ? PCheckbox : PRadio));
+const isMultiple = computed(() => {
+	return !!choiceboxGroupContext?.props.multiple;
+});
+const isDisabled = computed(() => {
+	return props.disabled || !!choiceboxGroupContext?.props.disabled || false;
+});
+const inputName = computed(() => {
+	if (isMultiple.value) {
+		return internalId;
+	}
+	return choiceboxGroupContext?.name || internalId;
+});
+const modelValue = useModelValue(choiceboxGroupContext?.props, choiceboxGroupContext?.emits);
+const isSelected = computed(() => {
+	if (isMultiple.value) {
+		return toArray(modelValue.value).includes(props.value);
+	}
+	return modelValue.value === props.value;
+});
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-choicebox-item w-full flex-1 shrink-0 rounded-md border motion-safe:transition-colors",
+	variants: {
+		disabled: {
+			true: "cursor-not-allowed opacity-50",
+			false: "cursor-pointer"
+		},
+		selected: { true: "border-primary" }
+	},
+	compoundVariants: [{
+		disabled: false,
+		selected: false,
+		class: "hover:border-gray-500 hover:bg-background-hover"
+	}]
+}, { selection: () => ({
+	disabled: isDisabled.value,
+	selected: isSelected.value
+}) });
+const { classes: innerClasses } = useTailwindVariant({
+	base: "pxd-choicebox-item--inner size-4 p-0.5 pointer-events-none order-2 inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden border text-primary-foreground peer-focus-ring motion-safe:transition-colors",
+	variants: {
+		disabled: {},
+		multiple: {
+			true: "rounded-sm",
+			false: "after:content-empty after:size-2 rounded-full after:scale-40 after:rounded-full after:bg-primary after:opacity-0"
+		},
+		selected: {
+			true: "border-primary",
+			false: "border-gray-alpha-400"
+		}
+	},
+	compoundVariants: [
+		{
+			multiple: false,
+			selected: false,
+			class: ""
+		},
+		{
+			disabled: true,
+			multiple: true,
+			class: "bg-gray-100"
+		},
+		{
+			multiple: true,
+			selected: true,
+			class: "bg-primary"
+		},
+		{
+			multiple: false,
+			selected: true,
+			class: "after:scale-100 after:opacity-100 motion-safe:after:transition-appearance"
+		}
+	]
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({
+		disabled: isDisabled.value,
+		multiple: isMultiple.value,
+		selected: isSelected.value
+	})
+});
+function onInputChange(event) {
+	if (isDisabled.value) {
+		return;
+	}
+	const inputValue = props.value;
+	const checked = event.target.checked;
+	if (isMultiple.value) {
+		if (Array.isArray(modelValue.value)) {
+			modelValue.value = checked ? [...modelValue.value, inputValue] : modelValue.value.filter((v) => v !== inputValue);
+			return;
+		}
+		modelValue.value = [inputValue];
+		return;
+	}
+	modelValue.value = inputValue;
+}
 </script>
 
 <template>
-  <Component
-    :is="renderAs"
-    :value="value"
-    :disabled="disabled"
-    class="pxd-choicebox-item p-3 w-full flex-1 flex-row-reverse justify-between rounded-md border hover:border-gray-500 hover:bg-background-hover motion-safe:transition-colors"
-    v-bind="$attrs"
+  <label
+    data-choicebox-item
+    :role="isMultiple ? 'checkbox' : 'radio'"
+    :data-disabled="isDisabled"
+    :aria-selected="isSelected"
+    :for="inputId"
+    :class="classes"
+    v-bind="attrs"
   >
-    <div class="gap-1 flex flex-col">
-      <span class="pxd-choicebox--label font-medium">
-        <slot name="label">
-          {{ label }}
-        </slot>
-      </span>
-      <span class="pxd-choicebox--description text-sm text-foreground-secondary">
-        <slot name="description">
-          {{ description }}
-        </slot>
-      </span>
-    </div>
-  </Component>
-</template>
+    <div
+      class="pxd-choicebox-item--option p-3 flex items-center justify-between motion-safe:transition-colors"
+    >
+      <input
+        :id="inputId"
+        :type="isMultiple ? 'checkbox' : 'radio'"
+        :value="value"
+        class="peer visually-hidden"
+        :checked="isSelected"
+        :disabled="isDisabled"
+        :name="inputName"
+        @change="onInputChange"
+      />
 
-<style lang="postcss">
-.pxd-choicebox[aria-selected='true'] {
-  border-color: var(--color-primary);
-  background-color: hsla(var(--primary), 0.08);
+      <span aria-hidden="true" :class="innerClasses">
+        <CheckIcon v-if="isMultiple && isSelected" />
+      </span>
 
-  .pxd-choicebox--label,
-  .pxd-choicebox--description {
-    color: var(--color-primary);
-  }
-}
+      <div class="gap-1 flex flex-col">
+        <span class="pxd-choicebox-item--label text-sm font-medium">
+          <slot name="label">
+            {{ label }}
+          </slot>
+        </span>
+        <span class="pxd-choicebox-item--description text-sm text-gray-900 empty:hidden">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </span>
+      </div>
+    </div>
 
-.pxd-choicebox[data-disabled='true'] {
-  background-color: var(--color-background-100);
-  border-color: var(--color-border);
+    <div
+      v-if="$slots.default"
+      v-show="isSelected"
+      class="pxd-choicebox-item--content border-t border-primary motion-safe:transition-colors"
+    >
+      <slot />
+    </div>
+  </label>
+</template>
 
-  .pxd-choicebox--label,
-  .pxd-choicebox--description {
-    color: var(--color-gray-500);
-  }
-}
+<style>
+.pxd-choicebox-item[aria-selected=true] .pxd-choicebox-item--option{background-color:hsla(var(--primary),.08)}.pxd-choicebox-item[aria-selected=true] .pxd-choicebox-item--description,.pxd-choicebox-item[aria-selected=true] .pxd-choicebox-item--label{color:var(--color-primary)}
 </style>

package/dist/components/choicebox-item/types.d.ts

@@ -1,12 +1,8 @@
-import type { ComponentLabel, ComponentOption, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentValue } from '../../types/shared/props'
 
-interface Option extends ComponentOption {
-  description?: string
-}
-
-export interface ChoiceboxProps {
+export interface ChoiceboxItemProps {
   label?: ComponentLabel
-  value?: ComponentValue
+  value: ComponentValue
   disabled?: boolean
   description?: string
 }

package/dist/components/collapse/index.d.vue.ts

@@ -1,9 +1,9 @@
 import type { CollapseProps } from './types';
-declare var __VLS_1: {}, __VLS_20: {};
+declare var __VLS_1: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (args_0: MouseEvent) => any;

package/dist/components/collapse/index.vue

@@ -1,122 +1,96 @@
 <script setup>
 import ChevronDownIcon from "@gdsicon/vue/chevron-down";
-import { computed, onMounted, shallowRef, watch } from "vue";
-import { useCollapseGroupContext } from "../../contexts/collapse";
-import { getUniqueId } from "../../utils/uid";
+import { computed, shallowRef, watch } from "vue";
+import { useCollapseMotion } from "../../composables/_internal/use-collapse-motion.js";
+import { useCollapseGroupContext } from "../../contexts/collapse.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PCollapse",
-  inheritAttrs: false
+	name: "PCollapse",
+	inheritAttrs: false
 });
-const uid = getUniqueId();
 const props = defineProps({
-  title: { type: String, required: false },
-  expand: { type: Boolean, required: false }
+	title: {
+		type: String,
+		required: false
+	},
+	expand: {
+		type: Boolean,
+		required: false
+	}
 });
 const emits = defineEmits(["toggle"]);
-const localExpand = shallowRef(props.expand);
-const collapseGroupContext = useCollapseGroupContext();
-const isExpanded = computed(() => {
-  if (collapseGroupContext) {
-    return collapseGroupContext.expandedIds.value.has(uid);
-  }
-  return localExpand.value;
-});
-function beforeEnter(el) {
-  ;
-  el.style.height = "0";
-  el.style.overflow = "hidden";
-}
-function enter(el) {
-  void el.offsetHeight;
-  el.style.height = `${el.scrollHeight}px`;
-}
-function afterEnter(el) {
-  ;
-  el.style.height = "";
-  el.style.overflow = "";
-}
-function beforeLeave(el) {
-  ;
-  el.style.height = `${el.scrollHeight}px`;
-  el.style.overflow = "hidden";
-  void el.offsetHeight;
-}
-function leave(el) {
-  ;
-  el.style.height = "0";
+const uid = getUniqueId();
+const internalExpand = shallowRef(props.expand);
+const contentRef = shallowRef();
+const collapseGroup = useCollapseGroupContext();
+const isExpanded = computed(() => collapseGroup ? collapseGroup.expandedIds.value.has(uid) : internalExpand.value);
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isExpanded);
+function setExpanded(expanded, exclusive = false) {
+	if (collapseGroup) {
+		const ids = collapseGroup.expandedIds.value;
+		if (exclusive && !collapseGroup.props.multiple) {
+			ids.clear();
+		}
+		if (expanded) {
+			ids.add(uid);
+		} else {
+			ids.delete(uid);
+		}
+		return;
+	}
+	internalExpand.value = expanded;
 }
 function onToggleClick(ev) {
-  const newCheckedState = !isExpanded.value;
-  emits("toggle", ev);
-  if (collapseGroupContext) {
-    const ids = collapseGroupContext.expandedIds.value;
-    if (!collapseGroupContext.props.multiple) {
-      ids.clear();
-    }
-    if (newCheckedState) {
-      ids.add(uid);
-    } else {
-      ids.delete(uid);
-    }
-    return;
-  }
-  localExpand.value = newCheckedState;
+	emits("toggle", ev);
+	setExpanded(!isExpanded.value, true);
 }
-watch(
-  () => props.expand,
-  (expand) => {
-    if (collapseGroupContext) {
-      if (expand) {
-        collapseGroupContext.expandedIds.value.add(uid);
-      } else {
-        collapseGroupContext.expandedIds.value.delete(uid);
-      }
-    } else {
-      localExpand.value = expand;
-    }
-  },
-  { immediate: true }
-);
-onMounted(() => {
-  if (props.expand && collapseGroupContext) {
-    collapseGroupContext.expandedIds.value.add(uid);
-  }
-});
+function onDetailsToggle(ev) {
+	const details = ev.currentTarget;
+	// Find-in-page / fragment navigation opens <details> natively.
+	if (details.open && !isExpanded.value) {
+		skipEnterMotion();
+		setExpanded(true, true);
+	}
+}
+watch(() => props.expand, (expand) => setExpanded(!!expand), { immediate: true });
 </script>
 
 <template>
-  <div class="pxd-collapse group/collapse border-b" v-bind="$attrs">
-    <h3 class="pxd-collapse--title">
-      <button
-        class="pxd-collapse--trigger pr-1 group/collapse flex w-full cursor-pointer touch-manipulation appearance-none items-center justify-between border-none bg-transparent font-inherit self-focus-ring outline-none"
-        :data-state="isExpanded ? 'open' : 'closed'"
-        @click="onToggleClick"
-      >
+  <details
+    data-collapse
+    class="pxd-collapse group/collapse border-b"
+    v-bind="$attrs"
+    :open="detailsOpen"
+    @toggle="onDetailsToggle"
+  >
+    <summary
+      class="pxd-collapse--trigger pe-1 group/collapse flex w-full cursor-pointer touch-manipulation list-none appearance-none items-center justify-between border-none bg-transparent font-inherit self-focus-ring outline-none"
+      @click.prevent="onToggleClick"
+    >
+      <h3 class="pxd-collapse--title m-0 min-w-0 flex-1 font-inherit text-inherit">
         <slot name="title">
           {{ title }}
         </slot>
+      </h3>
 
-        <ChevronDownIcon
-          class="size-4 shrink-0 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform"
-        />
-      </button>
-    </h3>
+      <ChevronDownIcon
+        class="size-4 shrink-0 motion-safe:transition-transform"
+        :class="{ '-rotate-180': detailsOpen }"
+      />
+    </summary>
 
-    <Transition
-      name="pxd-transition--collapse"
-      @before-enter="beforeEnter"
-      @enter="enter"
-      @after-enter="afterEnter"
-      @before-leave="beforeLeave"
-      @leave="leave"
+    <div
+      ref="contentRef"
+      class="pxd-collapse--content"
+      :class="{
+  'motion-safe:transition-[height]': isExpanded || isLeaving
+}"
     >
-      <div v-show="isExpanded" class="pxd-collapse--content">
-        <slot />
-      </div>
-    </Transition>
-  </div>
+      <slot />
+    </div>
+  </details>
 </template>
 
 <style>
-.pxd-collapse--trigger{font-size:var(--collapse-font-size,24px);font-weight:var(--collapse-font-weight,600);padding-block:var(--collapse-padding,24px)}.pxd-transition--collapse-enter-active,.pxd-transition--collapse-leave-active{transition-property:height}
+.pxd-collapse--trigger{font-size:var(--collapse-font-size,24px);font-weight:var(--collapse-font-weight,600);padding-block:var(--collapse-padding,24px)}
 </style>