@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

package/dist/SegmentedControl-DERBN-Xd.js

@@ -0,0 +1,129 @@
+import { A as useRovingFocus, I as normalizeOptionInput } from "./records-BzTcxekG.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/SegmentedControl.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-checked",
+	"tabindex",
+	"disabled",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_2 = { class: "mint-segmented-control__label" };
+var _hoisted_3 = {
+	key: 0,
+	class: "mint-segmented-control__description"
+};
+//#endregion
+//#region src/components/SegmentedControl.vue
+var SegmentedControl_default = /* @__PURE__ */ defineComponent({
+	__name: "SegmentedControl",
+	props: {
+		modelValue: {},
+		options: {},
+		variant: { default: "card" },
+		size: { default: "md" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disabledValues: { default: () => [] }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		/** Renders a segmented button group for single-option selection, defaulting to the card variant. */
+		const props = __props;
+		const emit = __emit;
+		const normalizedOptions = computed(() => props.options.map(normalizeOptionInput));
+		const disabledValueSet = computed(() => new Set(props.disabledValues));
+		function isOptionDisabled(option) {
+			return option.disabled === true || disabledValueSet.value.has(option.value);
+		}
+		function isSelectionDisabled(option) {
+			return props.disabled || isOptionDisabled(option);
+		}
+		function handleSelect(option) {
+			if (isSelectionDisabled(option)) return;
+			emit("update:modelValue", option.value);
+		}
+		const optionRefs = /* @__PURE__ */ new Map();
+		function optionId(option) {
+			return String(option.value);
+		}
+		function setOptionRef(id, el) {
+			if (el instanceof HTMLElement) optionRefs.set(id, el);
+			else optionRefs.delete(id);
+		}
+		const selectableOptions = computed(() => normalizedOptions.value.filter((option) => !isSelectionDisabled(option)));
+		/** The one option carrying `tabindex="0"`: the checked one, else the first selectable. */
+		const tabbableId = computed(() => {
+			const target = selectableOptions.value.find((option) => option.value === props.modelValue) ?? selectableOptions.value[0];
+			return target ? optionId(target) : "";
+		});
+		function isTabbable(option) {
+			return optionId(option) === tabbableId.value;
+		}
+		const { handleKeydown: handleArrowKeydown } = useRovingFocus({
+			ids: () => selectableOptions.value.map(optionId),
+			activeId: () => tabbableId.value,
+			activate: (id) => {
+				const option = selectableOptions.value.find((candidate) => optionId(candidate) === id);
+				if (option) handleSelect(option);
+			},
+			getElement: (id) => optionRefs.get(id),
+			orientation: "horizontal"
+		});
+		function handleKeydown(event, option) {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				handleSelect(option);
+				return;
+			}
+			handleArrowKeydown(event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass([
+					"mint-segmented-control",
+					`mint-segmented-control--${__props.variant}`,
+					`mint-segmented-control--${__props.size}`,
+					__props.fullWidth ? "mint-segmented-control--full-width" : "",
+					__props.disabled ? "mint-segmented-control--disabled" : ""
+				]),
+				role: "radiogroup"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
+				return openBlock(), createElementBlock("button", {
+					key: String(option.value),
+					ref_for: true,
+					ref: (el) => setOptionRef(String(option.value), el),
+					type: "button",
+					role: "radio",
+					"aria-checked": __props.modelValue === option.value,
+					tabindex: isTabbable(option) ? 0 : -1,
+					disabled: isSelectionDisabled(option),
+					class: normalizeClass([
+						"mint-segmented-control__option",
+						`mint-segmented-control__option--${__props.variant}`,
+						`mint-segmented-control__option--${__props.size}`,
+						__props.modelValue === option.value ? "mint-segmented-control__option--active" : "",
+						isOptionDisabled(option) ? "mint-segmented-control__option--disabled" : ""
+					]),
+					onClick: ($event) => handleSelect(option),
+					onKeydown: ($event) => handleKeydown($event, option)
+				}, [createElementVNode("span", _hoisted_2, [option.color ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "mint-segmented-control__swatch",
+					style: normalizeStyle({ background: option.color }),
+					"aria-hidden": "true"
+				}, null, 4)) : createCommentVNode("", true), createTextVNode(toDisplayString(option.label), 1)]), option.description && __props.variant === "card" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(option.description), 1)) : createCommentVNode("", true)], 42, _hoisted_1);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { SegmentedControl_default as t };
+
+//# sourceMappingURL=SegmentedControl-DERBN-Xd.js.map

package/dist/SegmentedControl-DERBN-Xd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-DERBN-Xd.js","names":[],"sources":["../src/components/SegmentedControl.vue","../src/components/SegmentedControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Renders a segmented button group for single-option selection, defaulting to the card variant. */\nimport { computed, type ComponentPublicInstance } from 'vue'\nimport type { OptionPrimitive, SelectOption, SelectOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'\nimport { normalizeOptionInput } from '../utils/options'\nimport { useRovingFocus } from '../composables/useRovingFocus'\n\ninterface Props {\n  modelValue: string | number\n  options: SelectOptionInput[]\n  variant?: SegmentedControlVariant\n  size?: SegmentedControlSize\n  fullWidth?: boolean\n  disabled?: boolean\n  disabledValues?: Array<string | number>\n}\n\ntype SegmentedOption = SelectOption<OptionPrimitive>\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'card',\n  size: 'md',\n  fullWidth: false,\n  disabled: false,\n  disabledValues: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n}>()\n\nconst normalizedOptions = computed<SegmentedOption[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, SegmentedOption>))\nconst disabledValueSet = computed(() => new Set(props.disabledValues))\n\nfunction isOptionDisabled(option: SegmentedOption) {\n  return option.disabled === true || disabledValueSet.value.has(option.value)\n}\n\nfunction isSelectionDisabled(option: SegmentedOption) {\n  return props.disabled || isOptionDisabled(option)\n}\n\nfunction handleSelect(option: SegmentedOption) {\n  if (isSelectionDisabled(option)) return\n  emit('update:modelValue', option.value)\n}\n\n// Roving tabindex over the radio group: only the checked option is tabbable and\n// Left/Right (plus Home/End) move between the selectable options, matching BaseTabs.\nconst optionRefs = new Map<string, HTMLElement>()\n\nfunction optionId(option: SegmentedOption): string {\n  return String(option.value)\n}\n\nfunction setOptionRef(id: string, el: Element | ComponentPublicInstance | null) {\n  if (el instanceof HTMLElement) {\n    optionRefs.set(id, el)\n  } else {\n    optionRefs.delete(id)\n  }\n}\n\nconst selectableOptions = computed(() =>\n  normalizedOptions.value.filter(option => !isSelectionDisabled(option)),\n)\n\n/** The one option carrying `tabindex=\"0\"`: the checked one, else the first selectable. */\nconst tabbableId = computed(() => {\n  const checked = selectableOptions.value.find(option => option.value === props.modelValue)\n  const target = checked ?? selectableOptions.value[0]\n  return target ? optionId(target) : ''\n})\n\nfunction isTabbable(option: SegmentedOption): boolean {\n  return optionId(option) === tabbableId.value\n}\n\nconst { handleKeydown: handleArrowKeydown } = useRovingFocus({\n  ids: () => selectableOptions.value.map(optionId),\n  activeId: () => tabbableId.value,\n  activate: (id) => {\n    const option = selectableOptions.value.find(candidate => optionId(candidate) === id)\n    if (option) handleSelect(option)\n  },\n  getElement: (id) => optionRefs.get(id),\n  orientation: 'horizontal',\n})\n\nfunction handleKeydown(event: KeyboardEvent, option: SegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    handleSelect(option)\n    return\n  }\n  handleArrowKeydown(event)\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mint-segmented-control',\n      `mint-segmented-control--${variant}`,\n      `mint-segmented-control--${size}`,\n      fullWidth ? 'mint-segmented-control--full-width' : '',\n      disabled ? 'mint-segmented-control--disabled' : '',\n    ]\"\n    role=\"radiogroup\"\n  >\n    <button\n      v-for=\"option in normalizedOptions\"\n      :key=\"String(option.value)\"\n      :ref=\"(el) => setOptionRef(String(option.value), el)\"\n      type=\"button\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :tabindex=\"isTabbable(option) ? 0 : -1\"\n      :disabled=\"isSelectionDisabled(option)\"\n      :class=\"[\n        'mint-segmented-control__option',\n        `mint-segmented-control__option--${variant}`,\n        `mint-segmented-control__option--${size}`,\n        modelValue === option.value ? 'mint-segmented-control__option--active' : '',\n        isOptionDisabled(option) ? 'mint-segmented-control__option--disabled' : '',\n      ]\"\n      @click=\"handleSelect(option)\"\n      @keydown=\"handleKeydown($event, option)\"\n    >\n      <span class=\"mint-segmented-control__label\"><span\n        v-if=\"option.color\"\n        class=\"mint-segmented-control__swatch\"\n        :style=\"{ background: option.color }\"\n        aria-hidden=\"true\"\n      />{{ option.label }}</span>\n      <span\n        v-if=\"option.description && variant === 'card'\"\n        class=\"mint-segmented-control__description\"\n      >\n        {{ option.description }}\n      </span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Renders a segmented button group for single-option selection, defaulting to the card variant. */\nimport { computed, type ComponentPublicInstance } from 'vue'\nimport type { OptionPrimitive, SelectOption, SelectOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'\nimport { normalizeOptionInput } from '../utils/options'\nimport { useRovingFocus } from '../composables/useRovingFocus'\n\ninterface Props {\n  modelValue: string | number\n  options: SelectOptionInput[]\n  variant?: SegmentedControlVariant\n  size?: SegmentedControlSize\n  fullWidth?: boolean\n  disabled?: boolean\n  disabledValues?: Array<string | number>\n}\n\ntype SegmentedOption = SelectOption<OptionPrimitive>\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'card',\n  size: 'md',\n  fullWidth: false,\n  disabled: false,\n  disabledValues: () => [],\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n}>()\n\nconst normalizedOptions = computed<SegmentedOption[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, SegmentedOption>))\nconst disabledValueSet = computed(() => new Set(props.disabledValues))\n\nfunction isOptionDisabled(option: SegmentedOption) {\n  return option.disabled === true || disabledValueSet.value.has(option.value)\n}\n\nfunction isSelectionDisabled(option: SegmentedOption) {\n  return props.disabled || isOptionDisabled(option)\n}\n\nfunction handleSelect(option: SegmentedOption) {\n  if (isSelectionDisabled(option)) return\n  emit('update:modelValue', option.value)\n}\n\n// Roving tabindex over the radio group: only the checked option is tabbable and\n// Left/Right (plus Home/End) move between the selectable options, matching BaseTabs.\nconst optionRefs = new Map<string, HTMLElement>()\n\nfunction optionId(option: SegmentedOption): string {\n  return String(option.value)\n}\n\nfunction setOptionRef(id: string, el: Element | ComponentPublicInstance | null) {\n  if (el instanceof HTMLElement) {\n    optionRefs.set(id, el)\n  } else {\n    optionRefs.delete(id)\n  }\n}\n\nconst selectableOptions = computed(() =>\n  normalizedOptions.value.filter(option => !isSelectionDisabled(option)),\n)\n\n/** The one option carrying `tabindex=\"0\"`: the checked one, else the first selectable. */\nconst tabbableId = computed(() => {\n  const checked = selectableOptions.value.find(option => option.value === props.modelValue)\n  const target = checked ?? selectableOptions.value[0]\n  return target ? optionId(target) : ''\n})\n\nfunction isTabbable(option: SegmentedOption): boolean {\n  return optionId(option) === tabbableId.value\n}\n\nconst { handleKeydown: handleArrowKeydown } = useRovingFocus({\n  ids: () => selectableOptions.value.map(optionId),\n  activeId: () => tabbableId.value,\n  activate: (id) => {\n    const option = selectableOptions.value.find(candidate => optionId(candidate) === id)\n    if (option) handleSelect(option)\n  },\n  getElement: (id) => optionRefs.get(id),\n  orientation: 'horizontal',\n})\n\nfunction handleKeydown(event: KeyboardEvent, option: SegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    handleSelect(option)\n    return\n  }\n  handleArrowKeydown(event)\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mint-segmented-control',\n      `mint-segmented-control--${variant}`,\n      `mint-segmented-control--${size}`,\n      fullWidth ? 'mint-segmented-control--full-width' : '',\n      disabled ? 'mint-segmented-control--disabled' : '',\n    ]\"\n    role=\"radiogroup\"\n  >\n    <button\n      v-for=\"option in normalizedOptions\"\n      :key=\"String(option.value)\"\n      :ref=\"(el) => setOptionRef(String(option.value), el)\"\n      type=\"button\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :tabindex=\"isTabbable(option) ? 0 : -1\"\n      :disabled=\"isSelectionDisabled(option)\"\n      :class=\"[\n        'mint-segmented-control__option',\n        `mint-segmented-control__option--${variant}`,\n        `mint-segmented-control__option--${size}`,\n        modelValue === option.value ? 'mint-segmented-control__option--active' : '',\n        isOptionDisabled(option) ? 'mint-segmented-control__option--disabled' : '',\n      ]\"\n      @click=\"handleSelect(option)\"\n      @keydown=\"handleKeydown($event, option)\"\n    >\n      <span class=\"mint-segmented-control__label\"><span\n        v-if=\"option.color\"\n        class=\"mint-segmented-control__swatch\"\n        :style=\"{ background: option.color }\"\n        aria-hidden=\"true\"\n      />{{ option.label }}</span>\n      <span\n        v-if=\"option.description && variant === 'card'\"\n        class=\"mint-segmented-control__description\"\n      >\n        {{ option.description }}\n      </span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}