@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.cjs","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$attrs,\n        onClick: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOGGLE_SIZE_MODIFIERS","TOGGLE_CHECKED_VALUES","_sfc_main","getUniqueString","v","s","hasSlotContent","_","newChecked","hasLabel","ariaLabel","warn","_hoisted_1","_openBlock","_createElementBlock","$data","_ctx","_mergeProps","$props","_renderSlot","_createElementVNode","$options","_hoisted_4"],"mappings":"wNAAY,MAACA,EAAwB,CACnC,GAAI,kBACJ,GAAI,EACN,EAEaC,EAAwB,CAAC,GAAO,GAAM,OAAO,ECkCrDC,EAAU,CAEb,KAAM,WAEN,aAAc,GAEd,MAAO,CACL,KAAM,UACN,MAAO,QACR,EAED,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,EAAe,gBAAA,CAAK,CACzC,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAOD,QAAS,CACP,KAAM,CAAC,QAAS,MAAM,EACtB,QAAS,GACT,UAAYC,GAAMH,EAAsB,SAASG,CAAC,CACnD,EAOD,cAAe,CACb,KAAM,QACN,QAAS,EACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYC,GAAM,OAAO,KAAKL,CAAqB,EAAE,SAASK,CAAC,CAChE,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,gBAAiB,CACf,KAAM,OACN,QAAS,KAAO,CAAA,EACjB,CACF,EAED,MAAO,CAQL,QACD,EAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,QACtB,eAAAC,EAAc,eAEjB,EAED,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,KAAK,OACR,QAASC,GAAK,KAAK,mBAAoB,EAE1C,EAED,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,OACjC,EAED,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,QAC5C,EAED,eAAiB,CACf,MAAO,CACL,WACAP,EAAsB,KAAK,IAAI,EAC/B,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,eACjC,EAEJ,CACF,EAED,MAAO,CACL,QAASQ,EAAY,CACnB,KAAK,gBAAkBA,CACxB,CACF,EAED,SAAW,CACT,KAAK,eAAc,CACpB,EAED,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,SAAU,CAAC,KAAK,eAAe,EAEtC,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,gBAEhC,EAED,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,OACvB,EAED,gBAAkB,CAChB,KAAK,oBAAoB,KAAK,aAAY,EAAI,KAAK,OAAO,YAAY,CAAC,CACxE,EAED,oBAAqBC,EAAUC,EAAW,CACpC,CAACD,GAAY,CAACC,GAChBC,EAAI,KACF,+DACA,KAGL,CACF,CACH,EAhNOC,EAAA,CAAA,MAAM,kBAAkB,+EAuBvB,MAAM,2CAvBZ,OAAAC,YAAA,EAAAC,qBA0BM,MA1BNF,EA0BM,CAxBIG,EAAc,eAACC,EAAM,OAAC,OAAO,GADrCH,EAAAA,YAAAC,EAAAA,mBASQ,QATRG,aASQ,OAPL,MAAOC,EAAU,WACjB,IAAKA,EAAE,IACAA,EAAe,gBAAA,CACvB,UAAQ,cAAc,CAAA,EAAA,CAGtBC,aAAQH,EAAA,OAAA,SAAA,sCAEVI,EAAA,mBAcS,SAdTH,aAcS,CAbN,GAAIC,EAAE,GACN,KAAMG,EAAU,WACjB,KAAK,SACJ,eAAcN,EAAe,gBAAC,SAAQ,EACtC,SAAUG,EAAQ,SAClB,gBAAeA,EAAQ,SAAC,SAAQ,EAChC,MAAOG,EAAa,eACbA,EAAc,cAAA,EAAA,CAGdH,EAAQ,UADhBL,EAAAA,YAAAC,EAAAA,mBAGE,OAHFQ,CAGE"}
+{"version":3,"file":"toggle.cjs","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$attrs,\n        onClick: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","hasSlotContent","warn","_openBlock","_createElementBlock","_mergeProps","_renderSlot","_createElementVNode"],"mappings":"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"}

package/dist/lib/toggle.js

@@ -1,13 +1,15 @@
-import { warn as c, openBlock as a, createElementBlock as i, mergeProps as d, renderSlot as h, createCommentVNode as o, createElementVNode as g } from "vue";
-import { getUniqueString as u, hasSlotContent as m } from "./utils.js";
-import { _ as b } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import "./constants.js";
-const r = {
+import { warn, openBlock, createElementBlock, mergeProps, renderSlot, createCommentVNode, createElementVNode } from "vue";
+import { getUniqueString, hasSlotContent } from "../common/utils.js";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import "../common/constants.js";
+const TOGGLE_SIZE_MODIFIERS = {
   sm: "d-toggle--small",
   md: ""
-}, f = [!1, !0, "mixed"], k = {
+};
+const TOGGLE_CHECKED_VALUES = [false, true, "mixed"];
+const _sfc_main = {
   name: "DtToggle",
-  inheritAttrs: !1,
+  inheritAttrs: false,
   model: {
     prop: "checked",
     event: "change"
@@ -19,7 +21,7 @@ const r = {
     id: {
       type: String,
       default() {
-        return u();
+        return getUniqueString();
       }
     },
     /**
@@ -28,7 +30,7 @@ const r = {
      */
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Value of the toggle
@@ -37,8 +39,8 @@ const r = {
      */
     checked: {
       type: [Boolean, String],
-      default: !1,
-      validator: (e) => f.includes(e)
+      default: false,
+      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v)
     },
     /**
      * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually
@@ -47,7 +49,7 @@ const r = {
      */
     toggleOnClick: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * The size of the toggle.
@@ -56,7 +58,7 @@ const r = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(r).includes(e)
+      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s)
     },
     /**
      * Shows the icon
@@ -64,7 +66,7 @@ const r = {
      */
     showIcon: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Used to customize the label container
@@ -94,14 +96,14 @@ const r = {
   data() {
     return {
       internalChecked: this.checked,
-      hasSlotContent: m
+      hasSlotContent
     };
   },
   computed: {
     inputListeners() {
       return {
         ...this.$attrs,
-        onClick: (e) => this.toggleCheckedValue()
+        onClick: (_) => this.toggleCheckedValue()
       };
     },
     isIndeterminate() {
@@ -113,9 +115,9 @@ const r = {
     toggleClasses() {
       return [
         "d-toggle",
-        r[this.size],
+        TOGGLE_SIZE_MODIFIERS[this.size],
         {
-          "d-toggle--checked": this.internalChecked === !0,
+          "d-toggle--checked": this.internalChecked === true,
           "d-toggle--disabled": this.disabled,
           "d-toggle--indeterminate": this.isIndeterminate
         }
@@ -123,8 +125,8 @@ const r = {
     }
   },
   watch: {
-    checked(e) {
-      this.internalChecked = e;
+    checked(newChecked) {
+      this.internalChecked = newChecked;
     }
   },
   mounted() {
@@ -132,7 +134,10 @@ const r = {
   },
   methods: {
     toggleCheckedValue() {
-      this.$emit("change", !this.internalChecked), this.toggleOnClick && (this.internalChecked = !this.internalChecked);
+      this.$emit("change", !this.internalChecked);
+      if (this.toggleOnClick) {
+        this.internalChecked = !this.internalChecked;
+      }
     },
     hasSlotLabel() {
       return !!this.$slots.default;
@@ -140,43 +145,49 @@ const r = {
     runValidations() {
       this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
     },
-    validateInputLabels(e, s) {
-      !e && !s && c(
-        "You must provide an aria-label when there is no label passed",
-        this
-      );
+    validateInputLabels(hasLabel, ariaLabel) {
+      if (!hasLabel && !ariaLabel) {
+        warn(
+          "You must provide an aria-label when there is no label passed",
+          this
+        );
+      }
     }
   }
-}, C = { class: "d-toggle-wrapper" }, _ = ["for"], p = ["id", "role", "aria-checked", "disabled", "aria-disabled"], S = {
+};
+const _hoisted_1 = { class: "d-toggle-wrapper" };
+const _hoisted_2 = ["for"];
+const _hoisted_3 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
+const _hoisted_4 = {
   key: 0,
   class: "d-toggle__inner"
 };
-function y(e, s, t, I, n, l) {
-  return a(), i("div", C, [
-    n.hasSlotContent(e.$slots.default) ? (a(), i("label", d({
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("label", mergeProps({
       key: 0,
-      class: t.labelClass,
-      for: t.id
-    }, t.labelChildProps, { "data-qa": "toggle-label" }), [
-      h(e.$slots, "default")
-    ], 16, _)) : o("", !0),
-    g("button", d({
-      id: t.id,
-      role: l.toggleRole,
+      class: $props.labelClass,
+      for: $props.id
+    }, $props.labelChildProps, { "data-qa": "toggle-label" }), [
+      renderSlot(_ctx.$slots, "default")
+    ], 16, _hoisted_2)) : createCommentVNode("", true),
+    createElementVNode("button", mergeProps({
+      id: $props.id,
+      role: $options.toggleRole,
       type: "button",
-      "aria-checked": n.internalChecked.toString(),
-      disabled: t.disabled,
-      "aria-disabled": t.disabled.toString(),
-      class: l.toggleClasses
-    }, l.inputListeners), [
-      t.showIcon ? (a(), i("span", S)) : o("", !0)
-    ], 16, p)
+      "aria-checked": $data.internalChecked.toString(),
+      disabled: $props.disabled,
+      "aria-disabled": $props.disabled.toString(),
+      class: $options.toggleClasses
+    }, $options.inputListeners), [
+      $props.showIcon ? (openBlock(), createElementBlock("span", _hoisted_4)) : createCommentVNode("", true)
+    ], 16, _hoisted_3)
   ]);
 }
-const w = /* @__PURE__ */ b(k, [["render", y]]);
+const toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  w as DtToggle,
-  f as TOGGLE_CHECKED_VALUES,
-  r as TOGGLE_SIZE_MODIFIERS
+  toggle as DtToggle,
+  TOGGLE_CHECKED_VALUES,
+  TOGGLE_SIZE_MODIFIERS
 };
 //# sourceMappingURL=toggle.js.map

package/dist/lib/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$attrs,\n        onClick: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOGGLE_SIZE_MODIFIERS","TOGGLE_CHECKED_VALUES","_sfc_main","getUniqueString","v","s","hasSlotContent","_","newChecked","hasLabel","ariaLabel","warn","_hoisted_1","_openBlock","_createElementBlock","$data","_ctx","_mergeProps","$props","_renderSlot","_createElementVNode","$options","_hoisted_4"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$attrs,\n        onClick: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_renderSlot","_createElementVNode"],"mappings":"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"}

package/dist/lib/tooltip-directive.cjs

@@ -1,2 +1,85 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./utils.cjs"),r=require("vue"),d=require("./tooltip.cjs");require("./constants.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./lazy-show.cjs");const m={name:"dt-tooltip-directive",install(u){let p;const s=document.createElement("div");document.body.appendChild(s);const a="top";r.createApp({name:"DtTooltipDirectiveApp",components:{DtTooltip:d.DtTooltip},data(){return{tooltips:[]}},mounted(){p=r.getCurrentInstance()},methods:{addOrUpdateTooltip(t,e,o){const i=this.tooltips.findIndex(l=>l.id===t);i!==-1?(this.tooltips[i].message=e,this.tooltips[i].placement=o):this.tooltips.push({id:t,message:e,placement:o})},removeTooltip(t){this.tooltips=this.tooltips.filter(e=>e.id!==t)}},render(){return r.h("div",this.tooltips.map(({id:t,message:e,placement:o})=>r.h(d.DtTooltip,{key:t,message:e,placement:o,delay:process.env.NODE_ENV!=="test",externalAnchor:`[data-dt-tooltip-id="${t}"]`})))}}).mount(s),u.directive("dt-tooltip",{beforeMount(t,e){n(t,e)},updated(t,e){e.value!==e.oldValue&&n(t,e)},unmounted(t){p.ctx.removeTooltip(t.getAttribute("data-dt-tooltip-id"))}});function n(t,e){const o=t.getAttribute("data-dt-tooltip-id")||c.getUniqueString(),i=e.value,l=e.arg||a;t.setAttribute("data-dt-tooltip-id",o),p.ctx.addOrUpdateTooltip(o,i,l)}}};exports.DtTooltipDirective=m;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_utils = require("../common/utils.cjs");
+const vue = require("vue");
+const lib_tooltip = require("./tooltip.cjs");
+require("../common/constants.cjs");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("./lazy-show.cjs");
+const DtTooltipDirective = {
+  name: "dt-tooltip-directive",
+  install(app) {
+    let tooltipInstance;
+    const mountPoint = document.createElement("div");
+    document.body.appendChild(mountPoint);
+    const DEFAULT_PLACEMENT = "top";
+    const DtTooltipDirectiveApp = vue.createApp({
+      name: "DtTooltipDirectiveApp",
+      components: { DtTooltip: lib_tooltip.DtTooltip },
+      data() {
+        return {
+          tooltips: []
+        };
+      },
+      mounted() {
+        tooltipInstance = vue.getCurrentInstance();
+      },
+      methods: {
+        addOrUpdateTooltip(id, message, placement) {
+          const index = this.tooltips.findIndex((tooltip) => tooltip.id === id);
+          if (index !== -1) {
+            this.tooltips[index].message = message;
+            this.tooltips[index].placement = placement;
+          } else {
+            this.tooltips.push({ id, message, placement });
+          }
+        },
+        removeTooltip(id) {
+          this.tooltips = this.tooltips.filter((tooltip) => tooltip.id !== id);
+        }
+      },
+      render() {
+        return vue.h(
+          "div",
+          this.tooltips.map(({ id, message, placement }) => {
+            return vue.h(lib_tooltip.DtTooltip, {
+              key: id,
+              message,
+              placement,
+              /**
+               * Set the delay to false when running tests only.
+               */
+              delay: process.env.NODE_ENV !== "test",
+              externalAnchor: `[data-dt-tooltip-id="${id}"]`
+            });
+          })
+        );
+      }
+    });
+    DtTooltipDirectiveApp.mount(mountPoint);
+    app.directive("dt-tooltip", {
+      beforeMount(anchor, binding) {
+        setupTooltip(anchor, binding);
+      },
+      updated(anchor, binding) {
+        if (binding.value !== binding.oldValue) {
+          setupTooltip(anchor, binding);
+        }
+      },
+      unmounted(anchor) {
+        tooltipInstance.ctx.removeTooltip(anchor.getAttribute("data-dt-tooltip-id"));
+      }
+    });
+    function setupTooltip(anchor, binding) {
+      const tooltipId = anchor.getAttribute("data-dt-tooltip-id") || common_utils.getUniqueString();
+      const message = binding.value;
+      const placement = binding.arg || DEFAULT_PLACEMENT;
+      anchor.setAttribute("data-dt-tooltip-id", tooltipId);
+      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);
+    }
+  }
+};
+exports.DtTooltipDirective = DtTooltipDirective;
 //# sourceMappingURL=tooltip-directive.cjs.map

package/dist/lib/tooltip-directive.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-directive.cjs","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","app","tooltipInstance","mountPoint","DEFAULT_PLACEMENT","createApp","DtTooltip","getCurrentInstance","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":"mVAIY,MAACA,EAAqB,CAChC,KAAM,uBACN,QAASC,EAAK,CACZ,IAAIC,EACJ,MAAMC,EAAa,SAAS,cAAc,KAAK,EAC/C,SAAS,KAAK,YAAYA,CAAU,EAEpC,MAAMC,EAAoB,MACIC,EAAAA,UAAU,CACtC,KAAM,wBACN,WAAY,CAAEC,UAAAA,EAAAA,SAAW,EACzB,MAAQ,CACN,MAAO,CACL,SAAU,CAAE,CACtB,CACO,EAED,SAAW,CACTJ,EAAkBK,EAAkB,mBAAA,CACrC,EAED,QAAS,CACP,mBAAoBC,EAAIC,EAASC,EAAW,CAC1C,MAAMC,EAAQ,KAAK,SAAS,UAAUC,GAAWA,EAAQ,KAAOJ,CAAE,EAC9DG,IAAU,IAEZ,KAAK,SAASA,CAAK,EAAE,QAAUF,EAC/B,KAAK,SAASE,CAAK,EAAE,UAAYD,GAGjC,KAAK,SAAS,KAAK,CAAE,GAAAF,EAAI,QAAAC,EAAS,UAAAC,CAAS,CAAE,CAEhD,EAED,cAAeF,EAAI,CACjB,KAAK,SAAW,KAAK,SAAS,OAAOI,GAAWA,EAAQ,KAAOJ,CAAE,CAClE,CACF,EAED,QAAU,CACR,OAAOK,EAAC,EAAC,MACP,KAAK,SAAS,IAAI,CAAC,CAAE,GAAAL,EAAI,QAAAC,EAAS,UAAAC,KACzBG,EAAAA,EAAEP,EAAAA,UAAW,CAClB,IAAKE,EACL,QAAAC,EACA,UAAAC,EAIA,MAAO,QAAQ,IAAI,WAAa,OAChC,eAAgB,wBAAwBF,CAAE,IACxD,CAAa,CACF,CACX,CACO,CACP,CAAK,EAEqB,MAAML,CAAU,EAEtCF,EAAI,UAAU,aAAc,CAC1B,YAAaa,EAAQC,EAAS,CAE5BC,EAAaF,EAAQC,CAAO,CAC7B,EACD,QAASD,EAAQC,EAAS,CAEpBA,EAAQ,QAAUA,EAAQ,UAC5BC,EAAaF,EAAQC,CAAO,CAE/B,EACD,UAAWD,EAAQ,CACjBZ,EAAgB,IAAI,cAAcY,EAAO,aAAa,oBAAoB,CAAC,CAC5E,CACP,CAAK,EAED,SAASE,EAAcF,EAAQC,EAAS,CACtC,MAAME,EAAYH,EAAO,aAAa,oBAAoB,GAAKI,EAAe,gBAAA,EACxET,EAAUM,EAAQ,MAClBL,EAAYK,EAAQ,KAAOX,EAEjCU,EAAO,aAAa,qBAAsBG,CAAS,EAEnDf,EAAgB,IAAI,mBAAmBe,EAAWR,EAASC,CAAS,CACrE,CACF,CACH"}
+{"version":3,"file":"tooltip-directive.cjs","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["createApp","DtTooltip","getCurrentInstance","h","getUniqueString"],"mappings":";;;;;;;;;;AAIY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,QAAI;AACJ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwBA,IAAAA,UAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAEC,WAAAA,YAAAA,UAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,0BAAkBC,IAAkB,mBAAA;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoB,IAAI,SAAS,WAAW;AAC1C,gBAAM,QAAQ,KAAK,SAAS,UAAU,aAAW,QAAQ,OAAO,EAAE;AAClE,cAAI,UAAU,IAAI;AAEhB,iBAAK,SAAS,KAAK,EAAE,UAAU;AAC/B,iBAAK,SAAS,KAAK,EAAE,YAAY;AAAA,UAC7C,OAAiB;AAEL,iBAAK,SAAS,KAAK,EAAE,IAAI,SAAS,UAAS,CAAE;AAAA,UAC9C;AAAA,QACF;AAAA,QAED,cAAe,IAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,aAAW,QAAQ,OAAO,EAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAOC,IAAC;AAAA,UAAC;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,mBAAOA,IAAAA,EAAEF,YAAAA,WAAW;AAAA,cAClB,KAAK;AAAA,cACL;AAAA,cACA;AAAA;AAAA;AAAA;AAAA,cAIA,OAAO,QAAQ,IAAI,aAAa;AAAA,cAChC,gBAAgB,wBAAwB,EAAE;AAAA,YACxD,CAAa;AAAA,UACb,CAAW;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,MAAM,UAAU;AAEtC,QAAI,UAAU,cAAc;AAAA,MAC1B,YAAa,QAAQ,SAAS;AAE5B,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,QAAS,QAAQ,SAAS;AAExB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,UAAW,QAAQ;AACjB,wBAAgB,IAAI,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAKG,aAAe,gBAAA;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AAEnD,sBAAgB,IAAI,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACrE;AAAA,EACF;AACH;;"}

package/dist/lib/tooltip-directive.js

@@ -1,71 +1,85 @@
-import { getUniqueString as c } from "./utils.js";
-import { createApp as u, getCurrentInstance as v, h as n } from "vue";
-import { DtTooltip as s } from "./tooltip.js";
-import "./constants.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import { getUniqueString } from "../common/utils.js";
+import { createApp, getCurrentInstance, h } from "vue";
+import { DtTooltip } from "./tooltip.js";
+import "../common/constants.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
-import "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
+import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import "./lazy-show.js";
-const U = {
+const DtTooltipDirective = {
   name: "dt-tooltip-directive",
-  install(a) {
-    let p;
-    const l = document.createElement("div");
-    document.body.appendChild(l);
-    const m = "top";
-    u({
+  install(app) {
+    let tooltipInstance;
+    const mountPoint = document.createElement("div");
+    document.body.appendChild(mountPoint);
+    const DEFAULT_PLACEMENT = "top";
+    const DtTooltipDirectiveApp = createApp({
       name: "DtTooltipDirectiveApp",
-      components: { DtTooltip: s },
+      components: { DtTooltip },
       data() {
         return {
           tooltips: []
         };
       },
       mounted() {
-        p = v();
+        tooltipInstance = getCurrentInstance();
       },
       methods: {
-        addOrUpdateTooltip(t, o, e) {
-          const i = this.tooltips.findIndex((r) => r.id === t);
-          i !== -1 ? (this.tooltips[i].message = o, this.tooltips[i].placement = e) : this.tooltips.push({ id: t, message: o, placement: e });
+        addOrUpdateTooltip(id, message, placement) {
+          const index = this.tooltips.findIndex((tooltip) => tooltip.id === id);
+          if (index !== -1) {
+            this.tooltips[index].message = message;
+            this.tooltips[index].placement = placement;
+          } else {
+            this.tooltips.push({ id, message, placement });
+          }
         },
-        removeTooltip(t) {
-          this.tooltips = this.tooltips.filter((o) => o.id !== t);
+        removeTooltip(id) {
+          this.tooltips = this.tooltips.filter((tooltip) => tooltip.id !== id);
         }
       },
       render() {
-        return n(
+        return h(
           "div",
-          this.tooltips.map(({ id: t, message: o, placement: e }) => n(s, {
-            key: t,
-            message: o,
-            placement: e,
-            /**
-             * Set the delay to false when running tests only.
-             */
-            delay: process.env.NODE_ENV !== "test",
-            externalAnchor: `[data-dt-tooltip-id="${t}"]`
-          }))
+          this.tooltips.map(({ id, message, placement }) => {
+            return h(DtTooltip, {
+              key: id,
+              message,
+              placement,
+              /**
+               * Set the delay to false when running tests only.
+               */
+              delay: process.env.NODE_ENV !== "test",
+              externalAnchor: `[data-dt-tooltip-id="${id}"]`
+            });
+          })
         );
       }
-    }).mount(l), a.directive("dt-tooltip", {
-      beforeMount(t, o) {
-        d(t, o);
+    });
+    DtTooltipDirectiveApp.mount(mountPoint);
+    app.directive("dt-tooltip", {
+      beforeMount(anchor, binding) {
+        setupTooltip(anchor, binding);
       },
-      updated(t, o) {
-        o.value !== o.oldValue && d(t, o);
+      updated(anchor, binding) {
+        if (binding.value !== binding.oldValue) {
+          setupTooltip(anchor, binding);
+        }
       },
-      unmounted(t) {
-        p.ctx.removeTooltip(t.getAttribute("data-dt-tooltip-id"));
+      unmounted(anchor) {
+        tooltipInstance.ctx.removeTooltip(anchor.getAttribute("data-dt-tooltip-id"));
       }
     });
-    function d(t, o) {
-      const e = t.getAttribute("data-dt-tooltip-id") || c(), i = o.value, r = o.arg || m;
-      t.setAttribute("data-dt-tooltip-id", e), p.ctx.addOrUpdateTooltip(e, i, r);
+    function setupTooltip(anchor, binding) {
+      const tooltipId = anchor.getAttribute("data-dt-tooltip-id") || getUniqueString();
+      const message = binding.value;
+      const placement = binding.arg || DEFAULT_PLACEMENT;
+      anchor.setAttribute("data-dt-tooltip-id", tooltipId);
+      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);
     }
   }
 };
 export {
-  U as DtTooltipDirective
+  DtTooltipDirective
 };
 //# sourceMappingURL=tooltip-directive.js.map

package/dist/lib/tooltip-directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-directive.js","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","app","tooltipInstance","mountPoint","DEFAULT_PLACEMENT","createApp","DtTooltip","getCurrentInstance","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":";;;;;;;;AAIY,MAACA,IAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAASC,GAAK;AACZ,QAAIC;AACJ,UAAMC,IAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAYA,CAAU;AAEpC,UAAMC,IAAoB;AAkD1B,IAjD8BC,EAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAE,WAAAC,EAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,QAAAJ,IAAkBK,EAAkB;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoBC,GAAIC,GAASC,GAAW;AAC1C,gBAAMC,IAAQ,KAAK,SAAS,UAAU,CAAAC,MAAWA,EAAQ,OAAOJ,CAAE;AAClE,UAAIG,MAAU,MAEZ,KAAK,SAASA,CAAK,EAAE,UAAUF,GAC/B,KAAK,SAASE,CAAK,EAAE,YAAYD,KAGjC,KAAK,SAAS,KAAK,EAAE,IAAAF,GAAI,SAAAC,GAAS,WAAAC,EAAS,CAAE;AAAA,QAEhD;AAAA,QAED,cAAeF,GAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,CAAAI,MAAWA,EAAQ,OAAOJ,CAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAOK;AAAA,UAAE;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAAL,GAAI,SAAAC,GAAS,WAAAC,QACzBG,EAAEP,GAAW;AAAA,YAClB,KAAKE;AAAA,YACL,SAAAC;AAAA,YACA,WAAAC;AAAA;AAAA;AAAA;AAAA,YAIA,OAAO,QAAQ,IAAI,aAAa;AAAA,YAChC,gBAAgB,wBAAwBF,CAAE;AAAA,UACxD,CAAa,CACF;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK,EAEqB,MAAML,CAAU,GAEtCF,EAAI,UAAU,cAAc;AAAA,MAC1B,YAAaa,GAAQC,GAAS;AAE5B,QAAAC,EAAaF,GAAQC,CAAO;AAAA,MAC7B;AAAA,MACD,QAASD,GAAQC,GAAS;AAExB,QAAIA,EAAQ,UAAUA,EAAQ,YAC5BC,EAAaF,GAAQC,CAAO;AAAA,MAE/B;AAAA,MACD,UAAWD,GAAQ;AACjB,QAAAZ,EAAgB,IAAI,cAAcY,EAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAASE,EAAcF,GAAQC,GAAS;AACtC,YAAME,IAAYH,EAAO,aAAa,oBAAoB,KAAKI,EAAe,GACxET,IAAUM,EAAQ,OAClBL,IAAYK,EAAQ,OAAOX;AAEjC,MAAAU,EAAO,aAAa,sBAAsBG,CAAS,GAEnDf,EAAgB,IAAI,mBAAmBe,GAAWR,GAASC,CAAS;AAAA,IACrE;AAAA,EACF;AACH;"}
+{"version":3,"file":"tooltip-directive.js","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":[],"mappings":";;;;;;;;AAIY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,QAAI;AACJ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwB,UAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAE,UAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,0BAAkB,mBAAkB;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoB,IAAI,SAAS,WAAW;AAC1C,gBAAM,QAAQ,KAAK,SAAS,UAAU,aAAW,QAAQ,OAAO,EAAE;AAClE,cAAI,UAAU,IAAI;AAEhB,iBAAK,SAAS,KAAK,EAAE,UAAU;AAC/B,iBAAK,SAAS,KAAK,EAAE,YAAY;AAAA,UAC7C,OAAiB;AAEL,iBAAK,SAAS,KAAK,EAAE,IAAI,SAAS,UAAS,CAAE;AAAA,UAC9C;AAAA,QACF;AAAA,QAED,cAAe,IAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,aAAW,QAAQ,OAAO,EAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAO;AAAA,UAAE;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,mBAAO,EAAE,WAAW;AAAA,cAClB,KAAK;AAAA,cACL;AAAA,cACA;AAAA;AAAA;AAAA;AAAA,cAIA,OAAO,QAAQ,IAAI,aAAa;AAAA,cAChC,gBAAgB,wBAAwB,EAAE;AAAA,YACxD,CAAa;AAAA,UACb,CAAW;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,MAAM,UAAU;AAEtC,QAAI,UAAU,cAAc;AAAA,MAC1B,YAAa,QAAQ,SAAS;AAE5B,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,QAAS,QAAQ,SAAS;AAExB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,UAAW,QAAQ;AACjB,wBAAgB,IAAI,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAK,gBAAe;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AAEnD,sBAAgB,IAAI,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACrE;AAAA,EACF;AACH;"}