ablok-components 0.3.57 → 0.3.59

package/dist/components/templates/base-carousel/base-carousel.vue.js

@@ -0,0 +1,94 @@
+import { defineComponent as b, ref as s, openBlock as o, createElementBlock as n, withModifiers as u, createVNode as d, createCommentVNode as m, createElementVNode as i, Fragment as y, renderList as g, renderSlot as C, normalizeClass as w, toDisplayString as V } from "vue";
+import f from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+const W = { class: "carousel d-flex" }, L = ["title"], N = ["onClick"], $ = ["title"], S = /* @__PURE__ */ b({
+  __name: "base-carousel",
+  props: {
+    modelValue: {
+      type: Number,
+      default: -1
+    },
+    config: {
+      type: Object,
+      default: null
+    },
+    messages: {
+      type: Object,
+      default: {}
+    },
+    items: {
+      type: Array,
+      default: []
+    },
+    navigation: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["update:modelValue", "select"],
+  setup(l, { emit: v }) {
+    const p = v, e = s(), r = s();
+    function h() {
+      e.value.scrollTo({
+        top: 0,
+        left: e.value.scrollLeft - e.value.clientWidth > 0 ? e.value.scrollLeft - e.value.clientWidth : 0,
+        behavior: "smooth"
+      });
+    }
+    function k() {
+      e.value.scrollTo({
+        top: 0,
+        left: e.value.scrollLeft - e.value.clientWidth <= r.value.clientWidth ? e.value.scrollLeft + e.value.clientWidth : r.value.clientWidth,
+        behavior: "smooth"
+      });
+    }
+    function _(t) {
+      p("update:modelValue", t);
+    }
+    return (t, j) => (o(), n("div", W, [
+      l.navigation ? (o(), n("button", {
+        key: 0,
+        class: "carousel__control btn btn-link text-light",
+        type: "button",
+        onClick: u(h, ["prevent", "stop"]),
+        title: t.$t("common.backward")
+      }, [
+        d(f, { symbol: "chevron-left" })
+      ], 8, L)) : m("", !0),
+      i("div", {
+        ref_key: "viewport",
+        ref: e,
+        class: "carousel__viewport flex-grow-1"
+      }, [
+        i("div", {
+          ref_key: "track",
+          ref: r,
+          class: "carousel__track d-flex justify-center align-items-center"
+        }, [
+          (o(!0), n(y, null, g(l.items, (a, c) => C(t.$slots, "carousel-item", {
+            key: a.src,
+            item: a,
+            index: c
+          }, () => [
+            i("div", {
+              class: w(["carousel__item", c === l.modelValue ? "selected" : ""]),
+              onClick: (x) => _(c)
+            }, V(a), 11, N)
+          ])), 128))
+        ], 512)
+      ], 512),
+      l.navigation ? (o(), n("button", {
+        key: 1,
+        class: "carousel__control btn btn-link text-light",
+        type: "button",
+        onClick: u(k, ["prevent", "stop"]),
+        title: t.$t("common.forward")
+      }, [
+        d(f, { symbol: "chevron-right" })
+      ], 8, $)) : m("", !0)
+    ]));
+  }
+});
+export {
+  S as default
+};

package/dist/components/templates/base-carousel/base-carousel.vue3.js

@@ -0,0 +1,5 @@
+import o from "./base-carousel.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/components/templates/base-form/base-form.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent as s, openBlock as r, createElementBlock as i, createElementVNode as l, withModifiers as a, renderSlot as c } from "vue";
+const p = { class: "base-form" }, d = /* @__PURE__ */ s({
+  __name: "base-form",
+  props: {
+    id: {},
+    name: {},
+    variant: {},
+    disabled: { type: Boolean },
+    pending: { type: Boolean }
+  },
+  setup(m) {
+    function o(e) {
+      console.log("input", e);
+    }
+    function n(e) {
+      console.log("reset", e);
+    }
+    function t(e) {
+      console.log("submit", e);
+    }
+    return (e, f) => (r(), i("div", p, [
+      l("form", {
+        ref: "form",
+        onInput: o,
+        onReset: n,
+        onSubmit: a(t, ["prevent"])
+      }, [
+        c(e.$slots, "default")
+      ], 544)
+    ]));
+  }
+});
+export {
+  d as default
+};

package/dist/components/templates/base-form/base-form.vue3.js

@@ -0,0 +1,5 @@
+import o from "./base-form.vue.js";
+/* empty css               */
+export {
+  o as default
+};

package/dist/components/templates/modal-dialog/modal-dialog.vue.js

@@ -0,0 +1,123 @@
+import { defineComponent as _, ref as E, watch as k, onMounted as V, onBeforeUnmount as C, openBlock as c, createElementBlock as m, normalizeClass as B, createElementVNode as d, toDisplayString as f, createCommentVNode as p, renderSlot as y } from "vue";
+const w = { class: "modal-dialog__content d-flex flex-column" }, L = { class: "modal-dialog__header d-flex p-3 border-bottom" }, S = {
+  key: 0,
+  class: "modal-dialog__title",
+  id: "exampleModalLabel"
+}, x = { class: "modal-dialog__body" }, $ = {
+  key: 0,
+  class: "modal-dialog__footer d-flex p-3 border-top"
+}, M = /* @__PURE__ */ _({
+  __name: "modal-dialog",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    modal: {
+      type: Boolean,
+      default: !0
+    },
+    size: {
+      type: String,
+      default: "md"
+      /* MD */
+    },
+    dismiss: {
+      type: Boolean,
+      default: !0
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    footer: {
+      type: Boolean,
+      default: !0
+    },
+    classes: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "confirm", "cancel"],
+  setup(a, { expose: g, emit: v }) {
+    const n = a, s = v, t = E();
+    function i() {
+      document.documentElement.style.setProperty("--scroll-position", `${Math.round(document.documentElement.scrollTop)}px`), n.modal ? t.value?.showModal() : t.value?.show(), s("update:modelValue", !0);
+    }
+    function l() {
+      const e = t.value && new KeyframeEffect(
+        t.value,
+        [{ translate: "0 -100%", opacity: "0" }],
+        { duration: 320, easing: "ease", direction: "normal" }
+      ), o = new Animation(e, document.timeline);
+      o.play(), o.addEventListener("finish", () => {
+        t.value?.close(), u();
+      }), s("update:modelValue", !1);
+    }
+    function u() {
+      const e = getComputedStyle(document.documentElement).getPropertyValue("--scroll-position");
+      document.documentElement.scrollTo({
+        top: parseInt(e, 10),
+        behavior: "instant"
+      }), s("update:modelValue", !1);
+    }
+    function h(e) {
+      i(), s("confirm", e);
+    }
+    function b() {
+      l(), s("cancel");
+    }
+    function r(e) {
+      const o = e.target;
+      o && o.nodeName === "DIALOG" && l();
+    }
+    return k(() => n.modelValue, (e, o) => {
+      e && e !== o ? i() : o && l();
+    }, { immediate: !0 }), V(() => {
+      t.value?.addEventListener("cancel", (e) => {
+        e.preventDefault(), l();
+      }), n.dismiss && document.addEventListener("click", r), n.modelValue && i();
+    }), C(() => {
+      n.dismiss && document.removeEventListener("click", r);
+    }), g({
+      show: i,
+      close: l,
+      confirm: h,
+      cancel: b
+    }), (e, o) => (c(), m("dialog", {
+      ref_key: "dialog",
+      ref: t,
+      class: B(["modal-dialog", {
+        [`modal-dialog--${a.size}`]: a.size
+      }]),
+      onClose: u
+    }, [
+      d("div", w, [
+        d("div", L, [
+          a.title ? (c(), m("h5", S, f(a.title), 1)) : p("", !0),
+          d("button", {
+            type: "button",
+            class: "btn-close ms-auto border-radius-none",
+            "aria-label": "Close",
+            onClick: l
+          })
+        ]),
+        d("div", x, [
+          y(e.$slots, "default")
+        ]),
+        a.footer ? (c(), m("div", $, [
+          y(e.$slots, "footer"),
+          d("button", {
+            type: "button",
+            class: "btn ms-auto",
+            onClick: l
+          }, f(e.$t("common.close")), 1)
+        ])) : p("", !0)
+      ])
+    ], 34));
+  }
+});
+export {
+  M as default
+};

package/dist/components/templates/modal-dialog/modal-dialog.vue3.js

@@ -0,0 +1,5 @@
+import o from "./modal-dialog.vue.js";
+/* empty css                  */
+export {
+  o as default
+};

package/dist/components/templates/popover-dialog/popover-dialog.vue.js

@@ -0,0 +1,95 @@
+import { defineComponent as c, ref as v, computed as g, watch as h, onMounted as y, onBeforeUnmount as T, openBlock as E, createElementBlock as L, renderSlot as S, createTextVNode as w } from "vue";
+const V = ["id", "popover"], B = /* @__PURE__ */ c({
+  __name: "popover-dialog",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    type: {
+      type: String,
+      default: "auto"
+    },
+    id: {
+      type: String,
+      default: () => `popover-dialog-${Math.random().toString(36).substr(2, 9)}`
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    header: {
+      type: Boolean,
+      default: !1
+    },
+    footer: {
+      type: Boolean,
+      default: !1
+    },
+    classes: {
+      type: String,
+      default: ""
+    },
+    hover: {
+      type: Boolean,
+      default: !1
+    },
+    hoverDelay: {
+      type: Number,
+      default: 400
+    },
+    closeTimeout: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(i, { emit: m }) {
+    const t = i, s = m, e = v(), a = v(), l = v(!1), d = g(() => "ontouchstart" in window || navigator.maxTouchPoints > 0);
+    function f() {
+      clearTimeout(a.value), t.hover && e.value?.showPopover();
+    }
+    function r() {
+      l.value = !0, clearTimeout(a.value), f();
+    }
+    function n() {
+      l.value = !1, (t.hover || t.closeTimeout) && (a.value = setTimeout(() => {
+        e.value?.hidePopover();
+      }, t.closeTimeout || t.hoverDelay));
+    }
+    h(() => t.modelValue, (o, u) => {
+      o && !u ? e.value?.matches(":popover-open") || e.value?.showPopover() : !o && u && e.value?.matches(":popover-open") && e.value?.hidePopover();
+    });
+    function p(o) {
+      o.newState === "open" ? (t.closeTimeout && !l.value && (clearTimeout(a.value), a.value = setTimeout(() => {
+        l.value || e.value?.hidePopover();
+      }, t.closeTimeout)), t.modelValue || s("update:modelValue", !0)) : o.newState === "closed" && (l.value = !1, t.modelValue && s("update:modelValue", !1));
+    }
+    return y(() => {
+      if (e.value?.addEventListener("toggle", p), t.modelValue && e.value?.showPopover(), !d.value) {
+        e.value?.addEventListener("mouseenter", r), e.value?.addEventListener("mouseleave", n);
+        const o = document.querySelector(`[popovertarget="${t.id}"]`);
+        o && (o.addEventListener("mouseenter", r), o.addEventListener("mouseleave", n));
+      }
+    }), T(() => {
+      if (clearTimeout(a.value), e.value?.removeEventListener("toggle", p), !d.value) {
+        e.value?.removeEventListener("mouseenter", r), e.value?.removeEventListener("mouseleave", n);
+        const o = document.querySelector(`[popovertarget="${t.id}"]`);
+        o && (o.removeEventListener("mouseenter", r), o.removeEventListener("mouseleave", n));
+      }
+    }), (o, u) => (E(), L("span", {
+      class: "popover-dialog",
+      id: i.id,
+      popover: i.type,
+      ref_key: "popover",
+      ref: e
+    }, [
+      S(o.$slots, "default", {}, () => [
+        u[0] || (u[0] = w(" Popover content goes here. ", -1))
+      ])
+    ], 8, V));
+  }
+});
+export {
+  B as default
+};

package/dist/components/templates/popover-dialog/popover-dialog.vue3.js

@@ -0,0 +1,5 @@
+import o from "./popover-dialog.vue.js";
+/* empty css                    */
+export {
+  o as default
+};

package/dist/components/templates/sortable-list/sortable-list.vue.js

@@ -0,0 +1,158 @@
+import { defineComponent as L, ref as v, computed as m, useSlots as O, watch as f, openBlock as i, createBlock as N, TransitionGroup as x, withModifiers as _, normalizeClass as D, withCtx as C, createElementBlock as d, Fragment as V, renderList as M, createCommentVNode as p, createElementVNode as b, createVNode as A, renderSlot as $, createTextVNode as P, toDisplayString as j } from "vue";
+import { sanitizeHtml as z } from "../../../composables/useSanitize.js";
+import q from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+const F = ["onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop", "innerHTML"], G = ["onDragstart", "onDrag", "onDragenter", "onDragover", "onDragleave", "onDragend", "onDrop"], J = {
+  key: 0,
+  class: "sortable-list__drag-handle"
+}, K = {
+  type: "button",
+  class: "btn",
+  draggable: "true"
+}, Q = {
+  key: 0,
+  class: "sortable-list__item"
+}, ee = /* @__PURE__ */ L({
+  __name: "sortable-list",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    config: {
+      type: Object,
+      default: null
+    },
+    messages: {
+      type: Object,
+      default: {}
+    },
+    vertical: {
+      type: Boolean,
+      default: !0
+    },
+    showDragHandle: {
+      type: Boolean,
+      default: !1
+    },
+    showPreview: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "update:isDragging",
+    "update:dragIndex",
+    "update:dragOverIndex"
+  ],
+  setup(n, { emit: k }) {
+    const S = n, o = v(!1), l = v(null), s = v(null), g = k, c = m({
+      get() {
+        return S.modelValue;
+      },
+      set(e) {
+        g("update:modelValue", e);
+      }
+    }), B = m(() => {
+      const e = document.querySelector(".is-drag-item")?.outerHTML;
+      return e ? z(e) : "";
+    }), E = O(), H = m(() => E["list-append"]);
+    function I(e, a) {
+      e.dataTransfer && (e.dataTransfer.dropEffect = "move", e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("index", a.toLocaleString()), o.value = !0, l.value = a);
+    }
+    function w(e, a) {
+      o.value = !1, l.value = null, s.value = null;
+    }
+    function R(e, a) {
+    }
+    function y(e, a) {
+      s.value = l.value !== a ? a : null;
+    }
+    function h(e, a) {
+      s.value = l.value !== a ? a : null;
+    }
+    function U(e, a) {
+    }
+    function T(e, a) {
+      if (e.dataTransfer) {
+        e.preventDefault();
+        const u = Number(e.dataTransfer.getData("index")), r = a, t = [...c.value];
+        (r || r === 0) && (u || u === 0) && t.splice(r, 0, t.splice(u, 1)[0]), c.value = t;
+      }
+    }
+    return f(() => o.value, (e) => {
+      g("update:isDragging", e);
+    }, { immediate: !0 }), f(() => l.value, (e) => {
+      g("update:dragIndex", e);
+    }, { immediate: !0 }), f(() => s.value, (e) => {
+      g("update:dragOverIndex", e);
+    }, { immediate: !0 }), (e, a) => (i(), N(x, {
+      name: "list",
+      tag: "ul",
+      class: D(["sortable-list p-0 d-flex gap-2", {
+        "flex-column": n.vertical,
+        "flex-row flex-wrap": !n.vertical
+      }]),
+      onDragover: a[0] || (a[0] = _(() => {
+      }, ["prevent"])),
+      onDragenter: a[1] || (a[1] = _(() => {
+      }, ["prevent"]))
+    }, {
+      default: C(() => [
+        (i(!0), d(V, null, M(c.value, (u, r) => (i(), d(V, { key: r }, [
+          n.showPreview && o.value && s.value === r ? (i(), d("li", {
+            key: 0,
+            class: "sortable-list__item is-drop-target",
+            onDragenter: (t) => y(t, r),
+            onDragover: (t) => h(t, r),
+            onDragleave: (t) => void 0,
+            onDragend: (t) => w(),
+            onDrop: (t) => T(t, r),
+            innerHTML: B.value
+          }, null, 40, F)) : p("", !0),
+          b("li", {
+            class: D(["sortable-list__item d-flex", {
+              "is-drag-item": o.value && l.value === r,
+              "is-drop-target": o.value && s.value === r && !n.showPreview,
+              "align-items-center gap-2": n.vertical
+            }]),
+            draggable: !0,
+            onDragstart: (t) => I(t, r),
+            onDrag: (t) => void 0,
+            onDragenter: (t) => y(t, r),
+            onDragover: (t) => h(t, r),
+            onDragleave: (t) => void 0,
+            onDragend: (t) => w(),
+            onDrop: (t) => T(t, r)
+          }, [
+            n.showDragHandle ? (i(), d("div", J, [
+              b("button", K, [
+                A(q, { symbol: "drag" })
+              ])
+            ])) : p("", !0),
+            b("div", {
+              class: D(["sortable-list__item-content", {
+                "flex-grow-1": n.vertical
+              }])
+            }, [
+              $(e.$slots, "list-item", {
+                item: u,
+                index: r
+              }, () => [
+                P(j(u), 1)
+              ])
+            ], 2)
+          ], 42, G)
+        ], 64))), 128)),
+        H.value ? (i(), d("li", Q, [
+          $(e.$slots, "list-append")
+        ])) : p("", !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  ee as default
+};

package/dist/components/templates/sortable-list/sortable-list.vue3.js

@@ -0,0 +1,5 @@
+import o from "./sortable-list.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/components/templates/touch-wrapper/touch-wrapper.vue.js

@@ -0,0 +1,85 @@
+import { defineComponent as g, getCurrentInstance as h, ref as y, onMounted as E, openBlock as $, createElementBlock as C, renderSlot as c, createElementVNode as s, createVNode as u, unref as p } from "vue";
+import i from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+const _ = { class: "touch-wrapper__controls" }, k = {
+  class: "btn-group",
+  role: "group"
+}, N = /* @__PURE__ */ g({
+  __name: "touch-wrapper",
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: m }) {
+    const a = h()?.appContext?.config?.globalProperties?.$config || { iconSprite: "/symbol-defs.svg" }, f = d, b = m, n = y();
+    function o(t) {
+      const e = f.modelValue + t;
+      b("update:modelValue", t === 0 ? 1 : e >= 1 ? e : 1);
+    }
+    function v(t) {
+      if (t.ctrlKey) {
+        t.preventDefault();
+        const e = 0 - t.deltaY * 0.01;
+        o(e);
+      }
+    }
+    function r(t) {
+      t.preventDefault();
+      const { scale: e } = t, l = e > 1 ? e * 0.01 : 0 - e;
+      o(l);
+    }
+    return E(() => {
+      n.value && (n.value.addEventListener("wheel", v, !1), n.value.addEventListener("gesturestart", r, !1), n.value.addEventListener("gesturechange", r, !1), n.value.addEventListener("gestureend", r, !1));
+    }), (t, e) => ($(), C("div", {
+      ref_key: "touchElement",
+      ref: n,
+      class: "touch-wrapper"
+    }, [
+      c(t.$slots, "controls", {
+        on: { setScale: o }
+      }, () => [
+        s("div", _, [
+          s("div", k, [
+            s("button", {
+              type: "button",
+              class: "btn",
+              onClick: e[0] || (e[0] = (l) => o(-1))
+            }, [
+              u(i, {
+                symbol: "minus",
+                "base-path": p(a).iconSprite
+              }, null, 8, ["base-path"])
+            ]),
+            s("button", {
+              type: "button",
+              class: "btn",
+              onClick: e[1] || (e[1] = (l) => o(0))
+            }, [
+              u(i, {
+                symbol: "maximize",
+                "base-path": p(a).iconSprite
+              }, null, 8, ["base-path"])
+            ]),
+            s("button", {
+              type: "button",
+              class: "btn",
+              onClick: e[2] || (e[2] = (l) => o(1))
+            }, [
+              u(i, {
+                symbol: "plus",
+                "base-path": p(a).iconSprite
+              }, null, 8, ["base-path"])
+            ])
+          ])
+        ])
+      ]),
+      c(t.$slots, "default")
+    ], 512));
+  }
+});
+export {
+  N as default
+};

package/dist/components/templates/touch-wrapper/touch-wrapper.vue3.js

@@ -0,0 +1,5 @@
+import o from "./touch-wrapper.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/composables/useCameraFilter.js

@@ -0,0 +1,56 @@
+import { computed as F } from "vue";
+function R(l) {
+  const m = F(() => {
+    if (!l.tintColor) return null;
+    const e = l.tintColor.replace("#", ""), a = parseInt(e.substring(0, 2), 16), i = parseInt(e.substring(2, 4), 16), r = parseInt(e.substring(4, 6), 16);
+    return { r: a, g: i, b: r };
+  });
+  function f(e, a, i) {
+    if (l.filter === "none" && !l.tintColor) return;
+    const r = e.getImageData(0, 0, a, i), t = r.data;
+    if (l.filter === "grayscale")
+      for (let n = 0; n < t.length; n += 4) {
+        const o = 0.299 * t[n] + 0.587 * t[n + 1] + 0.114 * t[n + 2];
+        t[n] = o, t[n + 1] = o, t[n + 2] = o;
+      }
+    else if (l.filter === "sepia")
+      for (let n = 0; n < t.length; n += 4) {
+        const o = t[n], g = t[n + 1], c = t[n + 2];
+        t[n] = Math.min(255, 0.393 * o + 0.769 * g + 0.189 * c), t[n + 1] = Math.min(255, 0.349 * o + 0.686 * g + 0.168 * c), t[n + 2] = Math.min(255, 0.272 * o + 0.534 * g + 0.131 * c);
+      }
+    if (l.tintColor && m.value) {
+      const { r: n, g: o, b: g } = m.value, c = l.tintIntensity;
+      for (let s = 0; s < t.length; s += 4) {
+        const d = t[s], h = t[s + 1], u = t[s + 2], I = d * n / 255, C = h * o / 255, v = u * g / 255;
+        t[s] = d + (I - d) * c, t[s + 1] = h + (C - h) * c, t[s + 2] = u + (v - u) * c;
+      }
+    }
+    e.putImageData(r, 0, 0);
+  }
+  async function w(e) {
+    if (typeof e != "string")
+      return e.complete && e.naturalWidth > 0 || await new Promise((i, r) => {
+        e.onload = () => i(), e.onerror = () => r(new Error("Failed to load image element"));
+      }), e;
+    const a = new Image();
+    return await new Promise((i, r) => {
+      a.onload = () => i(), a.onerror = () => r(new Error("Failed to load image source")), a.src = e;
+    }), a;
+  }
+  async function b(e, a = {}) {
+    const i = await w(e), r = document.createElement("canvas"), t = a.width || i.naturalWidth || i.width, n = a.height || i.naturalHeight || i.height;
+    r.width = t, r.height = n;
+    const o = r.getContext("2d");
+    if (!o)
+      throw new Error("Could not create canvas context");
+    return o.drawImage(i, 0, 0, t, n), f(o, t, n), r.toDataURL(a.mimeType || "image/png", a.quality);
+  }
+  async function y(e, a = {}) {
+    const i = await b(e, a);
+    return (await fetch(i)).blob();
+  }
+  return { tintRgb: m, applyFilterToCanvas: f, applyFilterToImage: b, applyFilterToImageBlob: y };
+}
+export {
+  R as useCameraFilter
+};