framework7-vue/components/toggle.js

Build full featured iOS & Android apps using Framework7 & Vue

import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = ["name", "disabled", "readonly", "checked", "value"];
function render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("label", {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes)
  }, [_createElementVNode("input", {
    type: "checkbox",
    name: _ctx.name,
    disabled: _ctx.disabled,
    readonly: _ctx.readonly,
    checked: _ctx.checked,
    value: _ctx.value,
    onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args))
  }, null, 40, _hoisted_1), _cache[1] || (_cache[1] = _createElementVNode("span", {
    class: "toggle-icon"
  }, null, -1))], 2);
}
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7ready, f7 } from '../shared/f7.js';
import { useTooltip } from '../shared/use-tooltip.js';
export default {
  name: 'f7-toggle',
  render,
  props: {
    init: {
      type: Boolean,
      default: true
    },
    checked: Boolean,
    disabled: Boolean,
    readonly: Boolean,
    name: String,
    value: [String, Number, Array],
    tooltip: String,
    tooltipTrigger: String,
    ...colorProps
  },
  emits: ['change', 'toggle:change', 'update:checked'],
  setup(props, {
    emit
  }) {
    let f7Toggle = null;
    const elRef = ref(null);
    useTooltip(elRef, props);
    const onChange = event => {
      emit('change', event);
    };
    watch(() => props.checked, newValue => {
      if (!f7Toggle) return;
      f7Toggle.checked = newValue;
    });
    onMounted(() => {
      f7ready(() => {
        if (!props.init || !elRef.value) return;
        f7Toggle = f7.toggle.create({
          el: elRef.value,
          on: {
            change(toggleInstance) {
              emit('toggle:change', toggleInstance.checked);
              emit('update:checked', toggleInstance.checked);
            }
          }
        });
      });
    });
    onBeforeUnmount(() => {
      if (f7Toggle && f7Toggle.destroy && f7Toggle.$el) {
        f7Toggle.destroy();
      }
      f7Toggle = null;
    });
    const classes = computed(() => classNames('toggle', {
      disabled: props.disabled
    }, colorClasses(props)));
    return {
      classes,
      elRef,
      f7Toggle,
      onChange
    };
  }
};