@inkbar/vue 0.1.1 → 0.3.0

package/dist/components/InkZoomOut.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,32 @@
 import { useZoom as e } from "../composables/useZoom.js";
-import { createBlock as t, createTextVNode as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
-import { ToolbarButton as l } from "reka-ui";
+import t from "./InkIcon.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { ToolbarButton as u } from "reka-ui";
+import { ZoomOut as d } from "@inkbar/icons";
 //#region src/components/InkZoomOut.vue?vue&type=script&setup=true&lang.ts
-var u = /*@__PURE__*/ r({
+var f = /*@__PURE__*/ i({
 	__name: "InkZoomOut",
 	props: { asChild: {
 		type: Boolean,
 		default: !1
 	} },
-	setup(r) {
-		let { zoomOut: u } = e(), d = {
+	setup(i) {
+		let { zoomOut: f } = e(), p = {
 			"aria-label": "Zoom out",
 			title: "Zoom out",
-			onClick: () => u()
+			onClick: () => f()
 		};
-		return (e, u) => (a(), t(s(l), i({
-			"as-child": r.asChild,
+		return (e, f) => (o(), n(c(u), a({
+			"as-child": i.asChild,
 			class: "ink-zoom-out",
 			"data-ink-zoom-out": ""
-		}, d), {
-			default: c(() => [o(e.$slots, "default", {}, () => [u[0] ||= n("−", -1)])]),
+		}, p), {
+			default: l(() => [s(e.$slots, "default", {}, () => [r(t, { icon: c(d) }, null, 8, ["icon"])])]),
 			_: 3
 		}, 16, ["as-child"]));
 	}
 });
 //#endregion
-export { u as default };
+export { f as default };
 
 //# sourceMappingURL=InkZoomOut.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkZoomOut.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkZoomOut.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createTextVNode","InkZoomOut_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomOut","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","_cache","createTextVNode"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot>−</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;EAMA,IAAM,EAAE,eAAYQ,EAAQ,GAEtBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAQ;EACzB;oBAIEV,EAAA,GAAAC,EAOgBC,EAAAY,CAAA,GAPhBX,EAOgB;GANb,YAAUa,EAAA;GACX,OAAM;GACN,qBAAA;EACQ,GAAAP,CAAK,GAAA;GAEb,SAAAL,QAAc,CAAdC,EAAcc,EAAA,QAAA,WAAA,CAAA,SAAA,CAAR,AAAAC,EAAA,OAAAd,EAAA,KAAC,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"InkZoomOut.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createVNode","InkIcon","InkIcon_default","InkZoomOut_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomOut","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","createVNode","ZoomOut"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZoomOut } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot><InkIcon :icon=\"ZoomOut\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;EASA,IAAM,EAAE,eAAYU,EAAQ,GAEtBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAQ;EACzB;oBAIEZ,EAAA,GAAAC,EAOgBC,EAAAc,CAAA,GAPhBb,EAOgB;GANb,YAAUe,EAAA;GACX,OAAM;GACN,qBAAA;EACQ,GAAAP,CAAK,GAAA;GAEb,SAAAP,QAAwC,CAAxCC,EAAwCgB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAlCf,EAA2BC,GAAA,EAAjB,MAAML,EAAAqB,CAAA,EAAO,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/InkZoomSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.js","names":["_sfc_main","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","InkZoomSelect_default"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(e: Event): void {\n  const v = (e.target as HTMLSelectElement).value\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n</script>\n\n<template>\n  <select\n    class=\"ink-zoom-select\"\n    data-ink-zoom-select\n    aria-label=\"Zoom\"\n    :value=\"value\"\n    @change=\"onChange\"\n  >\n    <option value=\"fit-width\">Fit width</option>\n    <option value=\"fit-page\">Fit page</option>\n    <option v-for=\"l in ZOOM_LEVELS\" :key=\"l\" :value=\"String(l)\">\n      {{ Math.round(l * 100) }}%\n    </option>\n    <option v-if=\"custom !== null\" :value=\"`${CUSTOM}${custom}`\">\n      {{ Math.round(scale * 100) }}%\n    </option>\n  </select>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkZoomSelect.js","names":["_sfc_main","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","InkZoomSelect_default"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { Check, ChevronDown } from '@inkbar/icons'\nimport {\n  SelectContent,\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPortal,\n  SelectRoot,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectViewport,\n} from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(v: unknown): void {\n  if (typeof v !== 'string' || v === value.value) return\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n\nconst FITS = [\n  { value: 'fit-width', label: 'Fit width' },\n  { value: 'fit-page', label: 'Fit page' },\n]\n// Reka's typed props stop at its own; ARIA goes through a bound object.\nconst triggerAttrs = { 'aria-label': 'Zoom' }\nconst percent = (z: number) => `${Math.round(z * 100)}%`\n/** The levels, with a custom zoom in its place among them. */\nconst levels = computed(() => {\n  const list = ZOOM_LEVELS.map((l) => ({ z: l, value: String(l), label: percent(l) }))\n  const c = custom.value\n  if (c !== null) list.push({ z: c, value: `${CUSTOM}${c}`, label: percent(scale.value) })\n  return list.sort((a, b) => a.z - b.z)\n})\n</script>\n\n<template>\n  <SelectRoot :model-value=\"value\" @update:model-value=\"onChange\">\n    <SelectTrigger\n      class=\"ink-zoom-select ink-select-trigger\"\n      data-ink-zoom-select\n      v-bind=\"triggerAttrs\"\n    >\n      <SelectValue class=\"ink-select-value\" />\n      <SelectIcon class=\"ink-select-icon\">\n        <InkIcon :icon=\"ChevronDown\" :size=\"16\" />\n      </SelectIcon>\n    </SelectTrigger>\n    <SelectPortal>\n      <SelectContent\n        class=\"ink-select-content\"\n        data-ink-select-content\n        position=\"popper\"\n        side=\"top\"\n        :side-offset=\"4\"\n      >\n        <SelectViewport>\n          <SelectItem\n            v-for=\"o in FITS\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n          <SelectSeparator class=\"ink-select-separator\" />\n          <SelectItem\n            v-for=\"o in levels\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":""}

package/dist/components/InkZoomSelect.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomSelect.vue"],"names":[],"mappings":"AAwHA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InkZoomSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomSelect.vue"],"names":[],"mappings":"AA8bA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InkZoomSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,39 +1,115 @@
 import { useZoom as e } from "../composables/useZoom.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
-import { ZOOM_LEVELS as d } from "@inkbar/core/dom";
+import t from "./InkIcon.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, renderList as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+import { ZOOM_LEVELS as h } from "@inkbar/core/dom";
+import { SelectContent as g, SelectIcon as _, SelectItem as v, SelectItemIndicator as y, SelectItemText as b, SelectPortal as x, SelectRoot as S, SelectSeparator as C, SelectTrigger as w, SelectValue as T, SelectViewport as E } from "reka-ui";
+import { Check as D, ChevronDown as O } from "@inkbar/icons";
 //#region src/components/InkZoomSelect.vue?vue&type=script&setup=true&lang.ts
-var f = ["value"], p = ["value"], m = ["value"], h = "custom:", g = /*@__PURE__*/ o({
+var k = "custom:", A = /*@__PURE__*/ c({
 	__name: "InkZoomSelect",
-	setup(o) {
-		let { zoom: g, scale: _, setZoom: v } = e(), y = (e) => d.find((t) => Math.abs(t - e) < .001), b = n(() => typeof g.value == "number" && y(g.value) === void 0 ? g.value : null), x = n(() => {
-			let e = g.value;
-			return typeof e == "number" ? b.value === null ? String(y(e)) : `${h}${e}` : e;
+	setup(c) {
+		let { zoom: A, scale: j, setZoom: M } = e(), N = (e) => h.find((t) => Math.abs(t - e) < .001), P = r(() => typeof A.value == "number" && N(A.value) === void 0 ? A.value : null), F = r(() => {
+			let e = A.value;
+			return typeof e == "number" ? P.value === null ? String(N(e)) : `${k}${e}` : e;
 		});
-		function S(e) {
-			let t = e.target.value, n = t === "fit-width" || t === "fit-page" ? t : Number(t.replace(h, ""));
-			v(n);
+		function I(e) {
+			if (typeof e != "string" || e === F.value) return;
+			let t = e === "fit-width" || e === "fit-page" ? e : Number(e.replace(k, ""));
+			M(t);
 		}
-		return (e, n) => (s(), i("select", {
-			class: "ink-zoom-select",
-			"data-ink-zoom-select": "",
-			"aria-label": "Zoom",
-			value: x.value,
-			onChange: S
-		}, [
-			n[0] ||= a("option", { value: "fit-width" }, "Fit width", -1),
-			n[1] ||= a("option", { value: "fit-page" }, "Fit page", -1),
-			(s(!0), i(t, null, c(u(d), (e) => (s(), i("option", {
-				key: e,
-				value: String(e)
-			}, l(Math.round(e * 100)) + "% ", 9, p))), 128)),
-			b.value === null ? r("", !0) : (s(), i("option", {
-				key: 0,
-				value: `${h}${b.value}`
-			}, l(Math.round(u(_) * 100)) + "% ", 9, m))
-		], 40, f));
+		let L = [{
+			value: "fit-width",
+			label: "Fit width"
+		}, {
+			value: "fit-page",
+			label: "Fit page"
+		}], R = { "aria-label": "Zoom" }, z = (e) => `${Math.round(e * 100)}%`, B = r(() => {
+			let e = h.map((e) => ({
+				z: e,
+				value: String(e),
+				label: z(e)
+			})), t = P.value;
+			return t !== null && e.push({
+				z: t,
+				value: `${k}${t}`,
+				label: z(j.value)
+			}), e.sort((e, t) => e.z - t.z);
+		});
+		return (e, r) => (u(), i(p(S), {
+			"model-value": F.value,
+			"onUpdate:modelValue": I
+		}, {
+			default: m(() => [s(p(w), l({
+				class: "ink-zoom-select ink-select-trigger",
+				"data-ink-zoom-select": ""
+			}, R), {
+				default: m(() => [s(p(T), { class: "ink-select-value" }), s(p(_), { class: "ink-select-icon" }, {
+					default: m(() => [s(t, {
+						icon: p(O),
+						size: 16
+					}, null, 8, ["icon"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 16), s(p(x), null, {
+				default: m(() => [s(p(g), {
+					class: "ink-select-content",
+					"data-ink-select-content": "",
+					position: "popper",
+					side: "top",
+					"side-offset": 4
+				}, {
+					default: m(() => [s(p(E), null, {
+						default: m(() => [
+							(u(), a(n, null, d(L, (e) => s(p(v), {
+								key: e.value,
+								value: e.value,
+								class: "ink-select-item",
+								"data-ink-select-item": ""
+							}, {
+								default: m(() => [s(p(b), null, {
+									default: m(() => [o(f(e.label), 1)]),
+									_: 2
+								}, 1024), s(p(y), { class: "ink-select-indicator" }, {
+									default: m(() => [s(t, {
+										icon: p(D),
+										size: 16
+									}, null, 8, ["icon"])]),
+									_: 1
+								})]),
+								_: 2
+							}, 1032, ["value"])), 64)),
+							s(p(C), { class: "ink-select-separator" }),
+							(u(!0), a(n, null, d(B.value, (e) => (u(), i(p(v), {
+								key: e.value,
+								value: e.value,
+								class: "ink-select-item",
+								"data-ink-select-item": ""
+							}, {
+								default: m(() => [s(p(b), null, {
+									default: m(() => [o(f(e.label), 1)]),
+									_: 2
+								}, 1024), s(p(y), { class: "ink-select-indicator" }, {
+									default: m(() => [s(t, {
+										icon: p(D),
+										size: 16
+									}, null, 8, ["icon"])]),
+									_: 1
+								})]),
+								_: 2
+							}, 1032, ["value"]))), 128))
+						]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["model-value"]));
 	}
 });
 //#endregion
-export { g as default };
+export { A as default };
 
 //# sourceMappingURL=InkZoomSelect.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkZoomSelect.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_unref","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","CUSTOM","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","useZoom","level","ZOOM_LEVELS","l","z","custom","computed","zoom","value","onChange","v","next","openBlock","createElementBlock","_cache","createElementVNode","Fragment","renderList","unref","toDisplayString","createCommentVNode","scale"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(e: Event): void {\n  const v = (e.target as HTMLSelectElement).value\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n</script>\n\n<template>\n  <select\n    class=\"ink-zoom-select\"\n    data-ink-zoom-select\n    aria-label=\"Zoom\"\n    :value=\"value\"\n    @change=\"onChange\"\n  >\n    <option value=\"fit-width\">Fit width</option>\n    <option value=\"fit-page\">Fit page</option>\n    <option v-for=\"l in ZOOM_LEVELS\" :key=\"l\" :value=\"String(l)\">\n      {{ Math.round(l * 100) }}%\n    </option>\n    <option v-if=\"custom !== null\" :value=\"`${CUSTOM}${custom}`\">\n      {{ Math.round(scale * 100) }}%\n    </option>\n  </select>\n</template>\n"],"mappings":";;;;iDAQMW,IAAS;;;EAEf,IAAM,EAAE,SAAM,UAAO,eAAYE,EAAQ,GAEnCC,KAAS,MAAcC,EAAY,MAAM,MAAM,KAAK,IAAIC,IAAIC,CAAC,IAAI,IAAK,GAEtEC,IAASC,QACb,OAAOC,EAAK,SAAU,YAAYN,EAAMM,EAAK,KAAK,MAAM,KAAA,IAAYA,EAAK,QAAQ,IACnF,GACMC,IAAQF,QAAe;GAC3B,IAAMF,IAAIG,EAAK;GAEf,OADI,OAAOH,KAAM,WACVC,EAAO,UAAU,OAAO,OAAOJ,EAAMG,CAAC,CAAC,IAAI,GAAGN,IAASM,MAD5BA;EAEpC,CAAC;EAED,SAASK,EAAS,GAAgB;GAChC,IAAMC,IAAK,EAAE,OAA6B,OACpCC,IACJD,MAAM,eAAeA,MAAM,aAAaA,IAAI,OAAOA,EAAE,QAAQZ,GAAQ,EAAE,CAAC;GAC1E,EAAQa,CAAI;EACd;oBAIExB,EAAA,GAAAC,EAeS,UAAA;GAdP,OAAM;GACN,wBAAA;GACA,cAAW;GACV,OAAOoB,EAAA;GACC;;GAET,AAAAM,EAAA,OAAAzB,EAA4C,UAAA,EAApC,OAAM,YAAW,GAAC,aAAS,EAAA;GACnC,AAAAyB,EAAA,OAAAzB,EAA0C,UAAA,EAAlC,OAAM,WAAU,GAAC,YAAQ,EAAA;IACjCF,EAAA,EAAA,GAAAC,EAESE,GAAA,MAAAC,EAFWC,EAAAU,CAAA,IAAL,OAAff,EAAA,GAAAC,EAES,UAAA;IAFyB,KAAKe;IAAI,OAAO,OAAOA,CAAC;GACrD,GAAAV,EAAA,KAAK,MAAMU,IAAC,GAAA,CAAA,IAAU,MAC3B,GAAAP,CAAA;GACcS,EAAA,UAAM,OAEpBe,EAAA,IAAA,EAAA,KAFAjC,EAAA,GAAAC,EAES,UAAA;;IAFuB,OAAK,GAAKU,IAASO,EAAA;GAC9C,GAAAZ,EAAA,KAAK,MAAMD,EAAA6B,CAAA,IAAK,GAAA,CAAA,IAAU,MAC/B,GAAAxB,CAAA"}
+{"version":3,"file":"InkZoomSelect.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","InkIcon","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkIcon_default","CUSTOM","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","useZoom","level","ZOOM_LEVELS","l","z","custom","computed","zoom","value","onChange","v","next","FITS","triggerAttrs","percent","levels","list","c","scale","a","b","openBlock","createBlock","unref","SelectRoot","withCtx","createVNode","SelectTrigger","mergeProps","SelectValue","SelectIcon","ChevronDown","SelectPortal","SelectContent","SelectViewport","createElementBlock","Fragment","renderList","SelectItem","o","SelectItemText","createTextVNode","toDisplayString","SelectItemIndicator","Check","SelectSeparator"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { Check, ChevronDown } from '@inkbar/icons'\nimport {\n  SelectContent,\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPortal,\n  SelectRoot,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectViewport,\n} from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(v: unknown): void {\n  if (typeof v !== 'string' || v === value.value) return\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n\nconst FITS = [\n  { value: 'fit-width', label: 'Fit width' },\n  { value: 'fit-page', label: 'Fit page' },\n]\n// Reka's typed props stop at its own; ARIA goes through a bound object.\nconst triggerAttrs = { 'aria-label': 'Zoom' }\nconst percent = (z: number) => `${Math.round(z * 100)}%`\n/** The levels, with a custom zoom in its place among them. */\nconst levels = computed(() => {\n  const list = ZOOM_LEVELS.map((l) => ({ z: l, value: String(l), label: percent(l) }))\n  const c = custom.value\n  if (c !== null) list.push({ z: c, value: `${CUSTOM}${c}`, label: percent(scale.value) })\n  return list.sort((a, b) => a.z - b.z)\n})\n</script>\n\n<template>\n  <SelectRoot :model-value=\"value\" @update:model-value=\"onChange\">\n    <SelectTrigger\n      class=\"ink-zoom-select ink-select-trigger\"\n      data-ink-zoom-select\n      v-bind=\"triggerAttrs\"\n    >\n      <SelectValue class=\"ink-select-value\" />\n      <SelectIcon class=\"ink-select-icon\">\n        <InkIcon :icon=\"ChevronDown\" :size=\"16\" />\n      </SelectIcon>\n    </SelectTrigger>\n    <SelectPortal>\n      <SelectContent\n        class=\"ink-select-content\"\n        data-ink-select-content\n        position=\"popper\"\n        side=\"top\"\n        :side-offset=\"4\"\n      >\n        <SelectViewport>\n          <SelectItem\n            v-for=\"o in FITS\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n          <SelectSeparator class=\"ink-select-separator\" />\n          <SelectItem\n            v-for=\"o in levels\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":"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"}