Knob valueTemplate="{value}" too limited

[Fanna1119]

In the case where I would want the value template to be something other than the value.

Say for example a computed property where it changes the numeric value to a date.
At the moment we are limited to only {value}x
Perhaps a slot would be better for a custom value?

<template>
  <Knob
    valueTemplate="{moddate}"
    valueColor="SlateGray"
    rangeColor="MediumTurquoise"
    v-model="date"
    :min="0"
    :max="10"
    :size="350"
    :strokeWidth="5"
  />
</template>

<script>
import { computed, ref } from "vue";

export default {
  setup() {
    const date = ref(0);

    const moddate = computed(() => date.value * 2)

    return {
      date, moddate
    };
  },
};
</script>

[cagataycivici]

I know but it is SVG so slot cannot be supported.

[Fanna1119]

I know but it is SVG so slot cannot be supported.

I also tried simply changing the innerhtml but it also didn't budge :/

I will fork and see if it maybe works by including a foreignobject tag

[Fanna1119]

Just a quick example of foreign object implementation, let me know what you think of this or if any issues might occur using this.
repo: https://github.com/Fanna1119/foreignobject-vue3-example/

foreign.vue

<template>
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <polygon points="5,5 195,10 185,185 10,195" />
    <foreignObject
      :x="foreignobjdata.x"
      :y="foreignobjdata.y"
      :width="foreignobjdata.width"
      :height="foreignobjdata.height"
    >
      <div xmlns="http://www.w3.org/1999/xhtml">
        <p>{{ textobj }}</p>
        <slot></slot>
        <p>
          {{ outsidetext }}
        </p>
      </div>
    </foreignObject>
    {{ foreignobjdata }}
  </svg>
</template>

<script>
import { computed, reactive, ref, toRefs } from "vue";
export default {
  props: {
    outsidetext: {
      type: String,
    },
  },
  setup(props) {
    const foreignobjdata = reactive({
      x: 20,
      z: 20,
      width: 160,
      height: 160,
    });

    const textobj = ref("helloworld");

    const { outsidetext } = toRefs(props);

    return {
      textobj,
      outsidetext,
      foreignobjdata,
    };
  },
};
</script>

<style scoped>
div {
  color: white;
  font: 18px serif;
  height: 100%;
  overflow: auto;
}
</style> 

app.vue

<template>
  <div>
    <foreign outsidetext="🔥prop from parent🔥">
      <p>{{ slottext }}</p>
    </foreign>
  </div>

  <input v-model="slottext" type="text" />
</template>

<script>
import { ref } from "vue";
import foreign from "./components/foreign.vue";

export default {
  name: "App",
  components: {
    foreign,
  },

  setup() {
    const slottext = ref("hello");

    return {
      slottext,
    };
  },
};
</script>