@leavepulse/ui 0.37.10 → 0.37.11

package/dist/chunks/LpSwitch-Blizvqyt.js

@@ -0,0 +1,94 @@
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, mergeProps, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, normalizeClass, withCtx, createBlock } from "vue";
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex min-w-0 flex-col"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "text-xs text-muted"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "flex min-w-0 flex-col"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "text-xs text-muted"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSwitch",
+  props: {
+    modelValue: { type: Boolean },
+    disabled: { type: Boolean },
+    label: {},
+    description: {},
+    labelPosition: { default: "end" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const labelled = computed(() => Boolean(props.label || props.description || slots.default));
+    const TRACK = "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55";
+    const THUMB = "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5";
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
+      if (!labelled.value) return TRACK;
+      return props.labelPosition === "start" ? "flex w-full cursor-pointer items-center justify-between gap-3 text-sm text-ink" : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink";
+    });
+    function onUpdate(value) {
+      emit("update:modelValue", value);
+    }
+    return (_ctx, _cache) => {
+      return labelled.value ? (openBlock(), createElementBlock("label", mergeProps({
+        key: 0,
+        class: [unref(rootClass), __props.disabled && "cursor-not-allowed"]
+      }, unref(rest)), [
+        __props.labelPosition === "start" ? (openBlock(), createElementBlock("span", _hoisted_1, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ]),
+          __props.description ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createVNode(unref(SwitchRoot), {
+          "model-value": __props.modelValue,
+          disabled: __props.disabled,
+          class: normalizeClass(TRACK),
+          "onUpdate:modelValue": onUpdate
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(SwitchThumb), {
+              class: normalizeClass(THUMB)
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "disabled"]),
+        __props.labelPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_3, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ]),
+          __props.description ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 16)) : (openBlock(), createBlock(unref(SwitchRoot), mergeProps({
+        key: 1,
+        "model-value": __props.modelValue,
+        disabled: __props.disabled,
+        class: unref(rootClass)
+      }, unref(rest), { "onUpdate:modelValue": onUpdate }), {
+        default: withCtx(() => [
+          createVNode(unref(SwitchThumb), {
+            class: normalizeClass(THUMB)
+          })
+        ]),
+        _: 1
+      }, 16, ["model-value", "disabled", "class"]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/components/LpSwitch.vue.d.ts

@@ -1,13 +1,42 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import('vue').DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     modelValue?: boolean;
     disabled?: boolean;
+    label?: string;
+    /** Secondary line under the label. */
+    description?: string;
+    /**
+     * Where the text sits. `end` (default) reads like LpCheckbox: switch, then
+     * text. `start` is the settings-row shape: text on the left, the switch
+     * pushed to the right edge of the row.
+     */
+    labelPosition?: "start" | "end";
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<{
     modelValue?: boolean;
     disabled?: boolean;
+    label?: string;
+    /** Secondary line under the label. */
+    description?: string;
+    /**
+     * Where the text sits. `end` (default) reads like LpCheckbox: switch, then
+     * text. `start` is the settings-row shape: text on the left, the switch
+     * pushed to the right edge of the row.
+     */
+    labelPosition?: "start" | "end";
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    labelPosition: "start" | "end";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpSwitch.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSwitch-xgnRU2k0.js";
+import { _ as _sfc_main } from "../chunks/LpSwitch-Blizvqyt.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -70,7 +70,7 @@ import { _ as _58 } from "./chunks/LpSlider-BwNIBkAK.js";
 import { _ as _59 } from "./chunks/LpSparkline-C6xQ2dwv.js";
 import { _ as _60 } from "./chunks/LpStat-CQaW8R--.js";
 import { _ as _61 } from "./chunks/LpStepper-Bk-XaQYU.js";
-import { _ as _62 } from "./chunks/LpSwitch-xgnRU2k0.js";
+import { _ as _62 } from "./chunks/LpSwitch-Blizvqyt.js";
 import { default as default7 } from "./components/LpTable.vue.js";
 import { _ as _63 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _64 } from "./chunks/LpTabs-Cefe_lys.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.37.10",
+  "version": "0.37.11",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpSwitch.vue

@@ -6,28 +6,73 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
-defineProps<{ modelValue?: boolean; disabled?: boolean }>()
-defineEmits<{ (e: "update:modelValue", value: boolean): void }>()
-
-// A switch has a fixed track size, so a consumer asking for a bigger one must not have to depend on stylesheet order to get it.
-const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55",
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    disabled?: boolean
+    label?: string
+    /** Secondary line under the label. */
+    description?: string
+    /**
+     * Where the text sits. `end` (default) reads like LpCheckbox: switch, then
+     * text. `start` is the settings-row shape: text on the left, the switch
+     * pushed to the right edge of the row.
+     */
+    labelPosition?: "start" | "end"
+  }>(),
+  { labelPosition: "end" },
 )
+const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void }>()
+
+const slots = useSlots()
+const labelled = computed(() => Boolean(props.label || props.description || slots.default))
+
+const TRACK =
+  "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
+const THUMB =
+  "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5"
+
+// Bare, the switch is the root, so a consumer asking for a bigger track must not
+// have to depend on stylesheet order to get it. With text, the row is the root
+// and the consumer's class lays out the row, as on LpCheckbox.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
+  if (!labelled.value) return TRACK
+  return props.labelPosition === "start"
+    ? "flex w-full cursor-pointer items-center justify-between gap-3 text-sm text-ink"
+    : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
+})
+
+function onUpdate(value: boolean) {
+  emit("update:modelValue", value)
+}
 </script>
 
 <template>
+  <label v-if="labelled" :class="[rootClass, disabled && 'cursor-not-allowed']" v-bind="rest">
+    <span v-if="labelPosition === 'start'" class="flex min-w-0 flex-col">
+      <slot>{{ label }}</slot>
+      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+    </span>
+    <SwitchRoot :model-value="modelValue" :disabled="disabled" :class="TRACK" @update:model-value="onUpdate">
+      <SwitchThumb :class="THUMB" />
+    </SwitchRoot>
+    <span v-if="labelPosition === 'end'" class="flex min-w-0 flex-col">
+      <slot>{{ label }}</slot>
+      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+    </span>
+  </label>
   <SwitchRoot
+    v-else
     :model-value="modelValue"
     :disabled="disabled"
     :class="rootClass"
     v-bind="rest"
-    @update:model-value="(v) => $emit('update:modelValue', v)"
+    @update:model-value="onUpdate"
   >
-    <SwitchThumb
-      class="h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5"
-    />
+    <SwitchThumb :class="THUMB" />
   </SwitchRoot>
 </template>

package/dist/chunks/LpSwitch-xgnRU2k0.js

@@ -1,35 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
-import { SwitchRoot, SwitchThumb } from "reka-ui";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpSwitch",
-  props: {
-    modelValue: { type: Boolean },
-    disabled: { type: Boolean }
-  },
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(SwitchRoot), mergeProps({
-        "model-value": __props.modelValue,
-        disabled: __props.disabled,
-        class: unref(rootClass)
-      }, unref(rest), {
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v))
-      }), {
-        default: withCtx(() => [
-          createVNode(unref(SwitchThumb), { class: "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5" })
-        ]),
-        _: 1
-      }, 16, ["model-value", "disabled", "class"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};