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

package/src/components/SCheckbox.vue

@@ -1,123 +1,123 @@
-<template>
-  <q-checkbox
-    dense
-    color="positive"
-    class="s-checkbox"
-    :class="length > 2 ? 'ck-margin-sm' : 'ck-margin-lg'"
-  />
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import { QCheckbox } from 'quasar';
-
-export default defineComponent({
-  name: 'SCheckbox',
-  components: {
-    QCheckbox,
-  },
-  props: {
-    length: Number,
-  },
-  setup() {
-    return {};
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-
-.s-checkbox {
-  margin: 0;
-  justify-content: center;
-  align-items: center;
-  font-size: $default-font;
-  height: 1.667em;
-  &:hover {
-    .q-checkbox__inner {
-      .q-checkbox__bg {
-        border: 1px solid $positive;
-        background-color: $Blue_B_Lighten-5;
-      }
-    }
-  }
-  & > .q-checkbox__inner {
-    min-width: 0;
-    width: 0.4em;
-    height: 0.4em;
-    &:before {
-      background: none !important;
-    }
-    .q-checkbox__bg {
-      border: 1px solid $Grey_Default;
-      width: 0.4em;
-      height: 0.4em;
-      background: white;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      .q-checkbox__svg {
-        width: 0.286em !important;
-        margin: 0 auto;
-      }
-    }
-    &--indet,
-    &--truthy {
-      color: $positive !important;
-      .q-checkbox__bg {
-        border: none !important;
-        background-color: $positive !important;
-      }
-      path {
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        &:first-of-type {
-          transform: scale(0.98);
-        }
-      }
-    }
-  }
-  & > .q-checkbox__label {
-    padding-left: $between-margin-md;
-    color: $Grey_Darken-4;
-    line-height: $default-content-height;
-  }
-}
-
-.s-checkbox[aria-checked="true"].disabled {
-  .q-checkbox__inner {
-    .q-checkbox__bg {
-      background: $Grey_Lighten-4 !important;
-      border: 1px solid $Grey_Lighten-2 !important;
-    }
-  }
-
-}
-.disabled.s-checkbox {
-  border: none !important;
-  background: none !important;
-  & > .q-checkbox__inner {
-    .q-checkbox__bg {
-      border: 1px solid $Grey_Lighten-2;
-      background: $Grey_Lighten-4;
-      .q-checkbox__svg {
-        color: $Grey_Default;
-      }
-    }
-  }
-}
-
-.ck-margin-sm {
-  margin-right: 20px;
-  &:last-of-type {
-    margin-right: 0;
-  }
-}
-.ck-margin-lg {
-  margin-right: 40px;
-  &:last-of-type {
-    margin-right: 0;
-  }
-}
-</style>
+<template>
+  <q-checkbox
+    dense
+    color="positive"
+    class="s-checkbox"
+    :class="length > 2 ? 'ck-margin-sm' : 'ck-margin-lg'"
+  />
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { QCheckbox } from 'quasar';
+
+export default defineComponent({
+  name: 'SCheckbox',
+  components: {
+    QCheckbox,
+  },
+  props: {
+    length: Number,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+
+.s-checkbox {
+  margin: 0;
+  justify-content: center;
+  align-items: center;
+  font-size: $default-font;
+  height: 1.667em;
+  &:hover {
+    .q-checkbox__inner {
+      .q-checkbox__bg {
+        border: 1px solid $positive;
+        background-color: $Blue_B_Lighten-5;
+      }
+    }
+  }
+  & > .q-checkbox__inner {
+    min-width: 0;
+    width: 0.4em;
+    height: 0.4em;
+    &:before {
+      background: none !important;
+    }
+    .q-checkbox__bg {
+      border: 1px solid $Grey_Default;
+      width: 0.4em;
+      height: 0.4em;
+      background: white;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .q-checkbox__svg {
+        width: 0.286em !important;
+        margin: 0 auto;
+      }
+    }
+    &--indet,
+    &--truthy {
+      color: $positive !important;
+      .q-checkbox__bg {
+        border: none !important;
+        background-color: $positive !important;
+      }
+      path {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        &:first-of-type {
+          transform: scale(0.98);
+        }
+      }
+    }
+  }
+  & > .q-checkbox__label {
+    padding-left: $between-margin-md;
+    color: $Grey_Darken-4;
+    line-height: $default-content-height;
+  }
+}
+
+.s-checkbox[aria-checked="true"].disabled {
+  .q-checkbox__inner {
+    .q-checkbox__bg {
+      background: $Grey_Lighten-4 !important;
+      border: 1px solid $Grey_Lighten-2 !important;
+    }
+  }
+
+}
+.disabled.s-checkbox {
+  border: none !important;
+  background: none !important;
+  & > .q-checkbox__inner {
+    .q-checkbox__bg {
+      border: 1px solid $Grey_Lighten-2;
+      background: $Grey_Lighten-4;
+      .q-checkbox__svg {
+        color: $Grey_Default;
+      }
+    }
+  }
+}
+
+.ck-margin-sm {
+  margin-right: 20px;
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+.ck-margin-lg {
+  margin-right: 40px;
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+</style>

package/src/components/SChip.vue

@@ -1,99 +1,99 @@
-<template>
-  <q-chip
-    class="no-hover row items-center text-color-Grey_Darken-4 s-chip"
-    square
-    removable
-    outline
-    dense
-    :clickable="!!inputValue"
-    color="Grey_Default"
-    :ripple="false"
-    :icon-remove="chipRemoveIcon"
-  >
-    <template v-if="inputValue">
-      <span
-        class="s-chip-input"
-        role="textbox"
-        id="inputSpan"
-        v-bind:contenteditable="!!inputValue"
-        @keypress="handleInput"
-      >
-        {{ inputValue }}
-      </span>
-    </template>
-    <slot></slot>
-  </q-chip>
-</template>
-
-<script>
-import { defineComponent, ref, watch } from 'vue';
-import { QChip } from 'quasar';
-import { chipRemoveIcon } from '../assets/icons.js';
-
-export default defineComponent({
-  name: 'SChip',
-  components: { QChip },
-  props: {
-    input: { type: String, default: '' },
-  },
-  setup(props, { emit }) {
-    const inputValue = ref(props.input);
-    watch(
-      () => props.input,
-      (val) => {
-        inputValue.value = val;
-      },
-    );
-    function handleInput(event) {
-      inputValue.value = event.target.outerText;
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        event.target.blur();
-        emit('update:input', inputValue.value);
-      }
-    }
-    return {
-      chipRemoveIcon,
-      inputValue,
-      handleInput,
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-
-.s-chip {
-  padding: $with-icon-padding !important;
-  border-radius: $button-border-radius;
-  background-color: white;
-  min-height: 28px;
-  &:hover {
-    border-color: $Grey_Darken-4;
-    .q-focus-helper {
-      background: inherit;
-    }
-  }
-  .q-chip__content {
-    color: $Grey_Darken-4;
-    font-size: $default-font;
-    font-weight: $default-font-weight;
-    height: $default-content-height;
-    min-height: $default-content-height;
-  }
-  .q-chip__icon--remove {
-    color: $Grey_Darken-4;
-    font-size: $icon-size-sm;
-    margin: 0;
-    margin-left: $default-icon-margin;
-  }
-}
-.s-chip-input {
-  height: 28px;
-  padding: 4px 0 !important;
-  &:focus-visible {
-    outline: none;
-  }
-}
-</style>
+<template>
+  <q-chip
+    class="no-hover row items-center text-color-Grey_Darken-4 s-chip"
+    square
+    removable
+    outline
+    dense
+    :clickable="!!inputValue"
+    color="Grey_Default"
+    :ripple="false"
+    :icon-remove="chipRemoveIcon"
+  >
+    <template v-if="inputValue">
+      <span
+        class="s-chip-input"
+        role="textbox"
+        id="inputSpan"
+        v-bind:contenteditable="!!inputValue"
+        @keypress="handleInput"
+      >
+        {{ inputValue }}
+      </span>
+    </template>
+    <slot></slot>
+  </q-chip>
+</template>
+
+<script>
+import { defineComponent, ref, watch } from 'vue';
+import { QChip } from 'quasar';
+import { chipRemoveIcon } from '../assets/icons.js';
+
+export default defineComponent({
+  name: 'SChip',
+  components: { QChip },
+  props: {
+    input: { type: String, default: '' },
+  },
+  setup(props, { emit }) {
+    const inputValue = ref(props.input);
+    watch(
+      () => props.input,
+      (val) => {
+        inputValue.value = val;
+      },
+    );
+    function handleInput(event) {
+      inputValue.value = event.target.outerText;
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.target.blur();
+        emit('update:input', inputValue.value);
+      }
+    }
+    return {
+      chipRemoveIcon,
+      inputValue,
+      handleInput,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+
+.s-chip {
+  padding: $with-icon-padding !important;
+  border-radius: $button-border-radius;
+  background-color: white;
+  min-height: 28px;
+  &:hover {
+    border-color: $Grey_Darken-4;
+    .q-focus-helper {
+      background: inherit;
+    }
+  }
+  .q-chip__content {
+    color: $Grey_Darken-4;
+    font-size: $default-font;
+    font-weight: $default-font-weight;
+    height: $default-content-height;
+    min-height: $default-content-height;
+  }
+  .q-chip__icon--remove {
+    color: $Grey_Darken-4;
+    font-size: $icon-size-sm;
+    margin: 0;
+    margin-left: $default-icon-margin;
+  }
+}
+.s-chip-input {
+  height: 28px;
+  padding: 4px 0 !important;
+  &:focus-visible {
+    outline: none;
+  }
+}
+</style>