quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.5

package/src/components/SHelp.vue

@@ -1,146 +1,146 @@
-<template>
-  <q-btn
-    :outline="!helpPopup"
-    rounded
-    unelevated
-    :ripple="false"
-    :color="color ? color : 'info'"
-    :icon="helpOutlineIcon"
-    :label="label"
-    no-wrap
-    class="s-help-btn"
-    :class="{ 's-help-popup-open': helpPopup, 'bg-white': !helpPopup }"
-  >
-    <q-popup-proxy v-model="helpPopup" :class="`bg-white s-help-menu ${popupClass}`">
-      <q-btn
-        flat
-        dense
-        :ripple="false"
-        :icon="closeIcon"
-        color="Grey_Default"
-        @click="helpPopup = false"
-        class="close-btn q-pa-none"
-        size="20px"
-      />
-      <div class="flex items-center">
-        <q-icon :name="helpOutlineIcon" size="23px" color="info" />
-        <span>{{ title }}</span>
-      </div>
-      <slot name="s-help-message">
-        <ul>
-          <li v-for="(m, i) in message" :key="i">
-            <span v-html="m"></span>
-          </li>
-        </ul>
-      </slot>
-    </q-popup-proxy>
-  </q-btn>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import { QBtn, QPopupProxy, QIcon } from 'quasar';
-import { helpOutlineIcon, closeIcon } from '../assets/icons.js';
-
-export default defineComponent({
-  name: 'SHelp',
-  components: {
-    QBtn,
-    QPopupProxy,
-    QIcon,
-  },
-  props: {
-    title: String,
-    label: String,
-    message: Array,
-    color: String,
-    popupClass: String,
-  },
-  setup() {
-    return {
-      helpOutlineIcon,
-      closeIcon,
-      helpPopup: ref(false),
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-
-.s-help-btn {
-  padding: 4px 16px 4px 10px;
-  min-height: $default-height;
-  height: $default-height;
-  &:before {
-    border-color: $Grey_Lighten-2;
-  }
-  .q-btn__content {
-    .q-icon {
-      margin-right: $between-margin-md;
-      font-size: $icon-size-md;
-    }
-    > .block {
-      font-size: $default-font;
-      color: $Grey_Darken-4;
-      line-height: $default-content-height;
-      height: $default-content-height;
-    }
-  }
-}
-.s-help-popup-open {
-  .q-btn__content {
-    & > span {
-      color: white !important;
-    }
-  }
-}
-.s-help-menu {
-  width: fit-content;
-  margin-top: $between-margin-md !important;
-  border-radius: 8px;
-  padding: 20px 32px;
-  position: relative;
-  .close-btn {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    min-height: 1em;
-    height: 1em;
-    width: 1em;
-    .q-btn__content {
-      .q-icon {
-        height: 20px;
-        width: 20px;
-      }
-    }
-  }
-  > div {
-    margin-bottom: $between-margin-md;
-    .q-icon {
-      margin-right: $between-margin-md;
-    }
-    span {
-      font-size: $font-md;
-      font-weight: 700;
-      color: $Grey_Darken-4;
-    }
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-    li {
-      list-style: none;
-      font-size: $default-font;
-      line-height: $double-line-height;
-      &:before {
-        content: "•";
-        font-size: 14px;
-        line-height: 20px;
-        margin: 0 12px 0 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <q-btn
+    :outline="!helpPopup"
+    rounded
+    unelevated
+    :ripple="false"
+    :color="color ? color : 'info'"
+    :icon="helpOutlineIcon"
+    :label="label"
+    no-wrap
+    class="s-help-btn"
+    :class="{ 's-help-popup-open': helpPopup, 'bg-white': !helpPopup }"
+  >
+    <q-popup-proxy v-model="helpPopup" :class="`bg-white s-help-menu ${popupClass}`">
+      <q-btn
+        flat
+        dense
+        :ripple="false"
+        :icon="closeIcon"
+        color="Grey_Default"
+        @click="helpPopup = false"
+        class="close-btn q-pa-none"
+        size="20px"
+      />
+      <div class="flex items-center">
+        <q-icon :name="helpOutlineIcon" size="23px" color="info" />
+        <span>{{ title }}</span>
+      </div>
+      <slot name="s-help-message">
+        <ul>
+          <li v-for="(m, i) in message" :key="i">
+            <span v-html="m"></span>
+          </li>
+        </ul>
+      </slot>
+    </q-popup-proxy>
+  </q-btn>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import { QBtn, QPopupProxy, QIcon } from 'quasar';
+import { helpOutlineIcon, closeIcon } from '../assets/icons.js';
+
+export default defineComponent({
+  name: 'SHelp',
+  components: {
+    QBtn,
+    QPopupProxy,
+    QIcon,
+  },
+  props: {
+    title: String,
+    label: String,
+    message: Array,
+    color: String,
+    popupClass: String,
+  },
+  setup() {
+    return {
+      helpOutlineIcon,
+      closeIcon,
+      helpPopup: ref(false),
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+
+.s-help-btn {
+  padding: 4px 16px 4px 10px;
+  min-height: $default-height;
+  height: $default-height;
+  &:before {
+    border-color: $Grey_Lighten-2;
+  }
+  .q-btn__content {
+    .q-icon {
+      margin-right: $between-margin-md;
+      font-size: $icon-size-md;
+    }
+    > .block {
+      font-size: $default-font;
+      color: $Grey_Darken-4;
+      line-height: $default-content-height;
+      height: $default-content-height;
+    }
+  }
+}
+.s-help-popup-open {
+  .q-btn__content {
+    & > span {
+      color: white !important;
+    }
+  }
+}
+.s-help-menu {
+  width: fit-content;
+  margin-top: $between-margin-md !important;
+  border-radius: 8px;
+  padding: 20px 32px;
+  position: relative;
+  .close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    min-height: 1em;
+    height: 1em;
+    width: 1em;
+    .q-btn__content {
+      .q-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
+  > div {
+    margin-bottom: $between-margin-md;
+    .q-icon {
+      margin-right: $between-margin-md;
+    }
+    span {
+      font-size: $font-md;
+      font-weight: 700;
+      color: $Grey_Darken-4;
+    }
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      list-style: none;
+      font-size: $default-font;
+      line-height: $double-line-height;
+      &:before {
+        content: "•";
+        font-size: 14px;
+        line-height: 20px;
+        margin: 0 12px 0 8px;
+      }
+    }
+  }
+}
+</style>