quasar-ui-sellmate-ui-kit 3.14.2 → 3.14.4

package/src/components/STooltip.vue

@@ -1,218 +1,218 @@
-<template>
-  <q-btn
-    no-caps
-    no-wrap
-    dense
-    unelevated
-    :ripple="false"
-    class="s-tooltip-btn q-pa-none"
-    :class="{ 'no-hover': noHover }"
-    @mouseenter="() => isToggled = true"
-    @click="() => isToggled = false"
-    :text-color="needToggle && isToggled && toggleColor ? toggleColor : textColor"
-  >
-    <template v-if="needToggle">
-      <q-menu
-        :self="$props.boxSelf"
-        :anchor="$props.boxAnchor"
-        :offset="$props.boxOffset"
-        :modelValue="isToggled"
-        no-parent-event
-        persistent
-        :class="menuClass"
-        class="bg-Blue_B_Darken-2 text-white s-tooltip"
-      >
-        <div class="tooltip-close-icon cursor-pointer">
-          <q-icon :name="closeIcon" size="16px" @click="() => isToggled = false" />
-        </div>
-        <div class="q-py-sm q-px-md"><slot></slot></div>
-      </q-menu>
-      <q-menu
-        :anchor="$props.arrowAnchor"
-        :self="$props.arrowSelf"
-        :offset="$props.arrowOffset"
-        :class="$props.arrowStyle"
-        class="tooltip-triangle"
-        :model-value="isToggled"
-        @update:model-value="(val) => {
-          isToggled = val
-          $emit('update:modelValue', val)
-        }"
-        no-parent-event
-        persistent
-      />
-    </template>
-    <template v-else>
-      <q-tooltip
-        :anchor="$props.boxAnchor"
-        :self="$props.boxSelf"
-        :offset="$props.boxOffset"
-        class="bg-Blue_B_Darken-2 text-white s-tooltip"
-        :modelValue="modelValue"
-        @hide="$emit('update:modelValue', false)"
-        @show="$emit('update:modelValue', true)"
-      >
-        <slot></slot>
-      </q-tooltip>
-      <q-tooltip
-        :anchor="$props.arrowAnchor"
-        :self="$props.arrowSelf"
-        :offset="$props.arrowOffset"
-        :class="$props.arrowStyle"
-        class="tooltip-triangle"
-        :modelValue="modelValue"
-      ></q-tooltip>
-    </template>
-  </q-btn>
-</template>
-
-<script>
-import { defineComponent, ref, watch } from 'vue';
-import {
-  QTooltip, QBtn, QMenu, QIcon,
-} from 'quasar';
-import { closeIcon } from '../assets/icons';
-
-export default defineComponent({
-  name: 'STooltip',
-  components: {
-    QTooltip,
-    QBtn,
-    QMenu,
-    QIcon,
-  },
-  props: {
-    modelValue: Boolean,
-    textColor: {
-      type: String,
-      default: '',
-    },
-    toggleColor: {
-      type: String,
-      default: '',
-    },
-    needToggle: {
-      type: Boolean,
-      default: false,
-    },
-    toggle: {
-      type: Boolean,
-      default: false,
-    },
-    noHover: {
-      type: Boolean,
-      default: false,
-    },
-    boxAnchor: {
-      type: String,
-      required: true,
-    },
-    boxSelf: {
-      type: String,
-      required: true,
-    },
-    boxOffset: {
-      type: Array,
-      required: true,
-    },
-    arrowAnchor: {
-      type: String,
-      required: true,
-    },
-    arrowSelf: {
-      type: String,
-      required: true,
-    },
-    arrowOffset: {
-      type: Array,
-      required: true,
-    },
-    arrowStyle: {
-      type: String,
-      required: true,
-    },
-    menuClass: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(props) {
-    const isToggled = ref(props.toggle);
-
-    watch(() => props.toggle, (val) => {
-      isToggled.value = val
-    })
-    return {
-      isToggled,
-      closeIcon,
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-.s-tooltip {
-  padding: $tooltip-padding;
-  border-radius: $button-border-radius;
-  font: {
-    size: $default-font;
-    weight: $font-weight-md;
-  }
-}
-.s-toggle-tip {
-  padding: 0;
-  border-radius: $button-border-radius;
-  font: {
-    size: $default-font;
-    weight: $font-weight-md;
-  }
-
-}
-.tooltip-triangle {
-  box-shadow: none !important;
-  background: none !important;
-  padding: 0;
-  width: 0;
-  height: 0;
-  &.bottom {
-    border: {
-      top: 0px solid transparent;
-      bottom: 12px solid $Blue_B_Darken-2;
-      left: 8px solid transparent;
-      right: 8px solid transparent;
-    }
-  }
-  &.top {
-    border: {
-      top: 12px solid $Blue_B_Darken-2;
-      bottom: 0px solid transparent;
-      left: 8px solid transparent;
-      right: 8px solid transparent;
-    }
-  }
-  &.left {
-    border: {
-      top: 8px solid transparent;
-      bottom: 8px solid transparent;
-      left: 12px solid $Blue_B_Darken-2;
-      right: 0px solid transparent;
-    }
-  }
-  &.right {
-    border: {
-      top: 8px solid transparent;
-      bottom: 8px solid transparent;
-      left: 0px solid transparent;
-      right: 12px solid $Blue_B_Darken-2;
-    }
-  }
-}
-.q-menu {
-  > .tooltip-close-icon {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-  }
-}
-</style>
+<template>
+  <q-btn
+    no-caps
+    no-wrap
+    dense
+    unelevated
+    :ripple="false"
+    class="s-tooltip-btn q-pa-none"
+    :class="{ 'no-hover': noHover }"
+    @mouseenter="() => isToggled = true"
+    @click="() => isToggled = false"
+    :text-color="needToggle && isToggled && toggleColor ? toggleColor : textColor"
+  >
+    <template v-if="needToggle">
+      <q-menu
+        :self="$props.boxSelf"
+        :anchor="$props.boxAnchor"
+        :offset="$props.boxOffset"
+        :modelValue="isToggled"
+        no-parent-event
+        persistent
+        :class="menuClass"
+        class="bg-Blue_B_Darken-2 text-white s-tooltip"
+      >
+        <div class="tooltip-close-icon cursor-pointer">
+          <q-icon :name="closeIcon" size="16px" @click="() => isToggled = false" />
+        </div>
+        <div class="q-py-sm q-px-md"><slot></slot></div>
+      </q-menu>
+      <q-menu
+        :anchor="$props.arrowAnchor"
+        :self="$props.arrowSelf"
+        :offset="$props.arrowOffset"
+        :class="$props.arrowStyle"
+        class="tooltip-triangle"
+        :model-value="isToggled"
+        @update:model-value="(val) => {
+          isToggled = val
+          $emit('update:modelValue', val)
+        }"
+        no-parent-event
+        persistent
+      />
+    </template>
+    <template v-else>
+      <q-tooltip
+        :anchor="$props.boxAnchor"
+        :self="$props.boxSelf"
+        :offset="$props.boxOffset"
+        class="bg-Blue_B_Darken-2 text-white s-tooltip"
+        :modelValue="modelValue"
+        @hide="$emit('update:modelValue', false)"
+        @show="$emit('update:modelValue', true)"
+      >
+        <slot></slot>
+      </q-tooltip>
+      <q-tooltip
+        :anchor="$props.arrowAnchor"
+        :self="$props.arrowSelf"
+        :offset="$props.arrowOffset"
+        :class="$props.arrowStyle"
+        class="tooltip-triangle"
+        :modelValue="modelValue"
+      ></q-tooltip>
+    </template>
+  </q-btn>
+</template>
+
+<script>
+import { defineComponent, ref, watch } from 'vue';
+import {
+  QTooltip, QBtn, QMenu, QIcon,
+} from 'quasar';
+import { closeIcon } from '../assets/icons';
+
+export default defineComponent({
+  name: 'STooltip',
+  components: {
+    QTooltip,
+    QBtn,
+    QMenu,
+    QIcon,
+  },
+  props: {
+    modelValue: Boolean,
+    textColor: {
+      type: String,
+      default: '',
+    },
+    toggleColor: {
+      type: String,
+      default: '',
+    },
+    needToggle: {
+      type: Boolean,
+      default: false,
+    },
+    toggle: {
+      type: Boolean,
+      default: false,
+    },
+    noHover: {
+      type: Boolean,
+      default: false,
+    },
+    boxAnchor: {
+      type: String,
+      required: true,
+    },
+    boxSelf: {
+      type: String,
+      required: true,
+    },
+    boxOffset: {
+      type: Array,
+      required: true,
+    },
+    arrowAnchor: {
+      type: String,
+      required: true,
+    },
+    arrowSelf: {
+      type: String,
+      required: true,
+    },
+    arrowOffset: {
+      type: Array,
+      required: true,
+    },
+    arrowStyle: {
+      type: String,
+      required: true,
+    },
+    menuClass: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const isToggled = ref(props.toggle);
+
+    watch(() => props.toggle, (val) => {
+      isToggled.value = val
+    })
+    return {
+      isToggled,
+      closeIcon,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+.s-tooltip {
+  padding: $tooltip-padding;
+  border-radius: $button-border-radius;
+  font: {
+    size: $default-font;
+    weight: $font-weight-md;
+  }
+}
+.s-toggle-tip {
+  padding: 0;
+  border-radius: $button-border-radius;
+  font: {
+    size: $default-font;
+    weight: $font-weight-md;
+  }
+
+}
+.tooltip-triangle {
+  box-shadow: none !important;
+  background: none !important;
+  padding: 0;
+  width: 0;
+  height: 0;
+  &.bottom {
+    border: {
+      top: 0px solid transparent;
+      bottom: 12px solid $Blue_B_Darken-2;
+      left: 8px solid transparent;
+      right: 8px solid transparent;
+    }
+  }
+  &.top {
+    border: {
+      top: 12px solid $Blue_B_Darken-2;
+      bottom: 0px solid transparent;
+      left: 8px solid transparent;
+      right: 8px solid transparent;
+    }
+  }
+  &.left {
+    border: {
+      top: 8px solid transparent;
+      bottom: 8px solid transparent;
+      left: 12px solid $Blue_B_Darken-2;
+      right: 0px solid transparent;
+    }
+  }
+  &.right {
+    border: {
+      top: 8px solid transparent;
+      bottom: 8px solid transparent;
+      left: 0px solid transparent;
+      right: 12px solid $Blue_B_Darken-2;
+    }
+  }
+}
+.q-menu {
+  > .tooltip-close-icon {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+  }
+}
+</style>