quasar-ui-sellmate-ui-kit 3.11.1 → 3.11.2

package/src/components/STabs.vue

@@ -1,32 +1,32 @@
-<template>
-  <q-tabs
-    align="left"
-    active-color="positive"
-    indicator-color="transparent"
-    no-caps
-    dense
-    class="s-tabs text-grey"
-    :model-value="tab"
-  >
-    <slot></slot>
-  </q-tabs>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import { QTabs } from 'quasar';
-
-export default defineComponent({
-  name: 'STabs',
-  components: {
-    QTabs,
-  },
-  setup(props) {
-    const tab = ref(props.modelValue);
-
-    return {
-      tab,
-    };
-  },
-});
-</script>
+<template>
+  <q-tabs
+    align="left"
+    active-color="positive"
+    indicator-color="transparent"
+    no-caps
+    dense
+    class="s-tabs text-grey"
+    :model-value="tab"
+  >
+    <slot></slot>
+  </q-tabs>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import { QTabs } from 'quasar';
+
+export default defineComponent({
+  name: 'STabs',
+  components: {
+    QTabs,
+  },
+  setup(props) {
+    const tab = ref(props.modelValue);
+
+    return {
+      tab,
+    };
+  },
+});
+</script>

package/src/components/STag.vue

@@ -1,152 +1,152 @@
-<template>
-  <q-badge
-    class="s-tag flex no-wrap flex-center"
-    :class="{
-      's-tag__sm': size === 'sm',
-      's-tag__md': size === 'md',
-      's-tag__lg': size === 'lg',
-      's-tag__rounded': rounded === true,
-    }"
-    :color="computedColor"
-    :text-color="computedTextColor"
-  >
-    <slot>
-      <q-icon v-if="$attrs.icon && size === 'lg'" :name="$attrs.icon" size="32px" class="q-mr-sm" />
-      <span v-html="label" :class="textClass"></span>
-    </slot>
-  </q-badge>
-</template>
-
-<script>
-  import { defineComponent, computed } from 'vue';
-  import { QBadge, QIcon } from 'quasar';
-
-  const colorStatusList = {
-    Grey: {
-      color: 'Grey_Lighten-4',
-      textColor: 'Grey_Darken-1',
-    },
-    Red: {
-      color: 'Red_Lighten-6',
-      textColor: 'Red_Lighten-1',
-    },
-    Orange: {
-      color: 'Orange_Lighten-6',
-      textColor: 'Orange_Default',
-    },
-    Yellow: {
-      color: 'Yellow_Lighten-5',
-      textColor: 'Yellow_Darken-2',
-    },
-    Green: {
-      color: 'Green_Lighten-6',
-      textColor: 'Green_Lighten-1',
-    },
-    Blue: {
-      color: 'Blue_C_Lighten-6',
-      textColor: 'Blue_C_Default',
-    },
-    Darkblue: {
-      color: 'Blue_B_Lighten-6',
-      textColor: 'Blue_B_Lighten-1',
-    },
-    Indigo: {
-      color: 'Blue_C_Lighten-7',
-      textColor: 'Blue_C_Darken-2',
-    },
-  };
-
-  export default defineComponent({
-    name: 'STag',
-    components: { QBadge, QIcon },
-    props: {
-      label: String,
-      size: {
-        /**
-         * @type {'sm' | 'md' | 'lg'} type
-         */
-        type: String,
-        default: 'md',
-      },
-      color: {
-        type: String,
-        default: 'Blue_C_Lighten-6',
-      },
-      textColor: {
-        type: String,
-        default: 'positive',
-      },
-      colorStatus: {
-        /**
-         * @type {'Grey' | 'Red' | 'Orange' | 'Yellow' | 'Green' | 'Blue' | 'Darkblue' | 'Indigo'} type
-         */
-        type: String,
-        default: '',
-      },
-      textClass: {
-        type: String,
-        default: '',
-      },
-      rounded: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props) {
-      const computedColor = computed(() =>
-        props.colorStatus ? colorStatusList[props.colorStatus].color : props.color,
-      );
-
-      const computedTextColor = computed(() =>
-        props.colorStatus ? colorStatusList[props.colorStatus].textColor : props.textColor,
-      );
-      return {
-        colorStatusList,
-        computedColor,
-        computedTextColor,
-      };
-    },
-  });
-</script>
-
-<style scoped lang="scss">
-  .s-tag {
-    border-radius: 4px;
-    box-sizing: border-box;
-    &__sm {
-      padding: 1px 6px;
-      height: 20px;
-      > span {
-        line-height: 18px;
-        font: {
-          size: 11px;
-        }
-      }
-    }
-    &__md {
-      padding: 2px 8px;
-      height: 24px;
-      > span {
-        line-height: 20px;
-        font: {
-          size: 12px;
-          weight: 700;
-        }
-      }
-    }
-    &__lg {
-      padding: 4px 16px;
-      height: 48px;
-      > span {
-        line-height: 40px;
-        font: {
-          size: 24px;
-          weight: 700;
-        }
-      }
-    }
-    &__rounded {
-      border-radius: 20px;
-    }
-  }
-</style>
+<template>
+  <q-badge
+    class="s-tag flex no-wrap flex-center"
+    :class="{
+      's-tag__sm': size === 'sm',
+      's-tag__md': size === 'md',
+      's-tag__lg': size === 'lg',
+      's-tag__rounded': rounded === true,
+    }"
+    :color="computedColor"
+    :text-color="computedTextColor"
+  >
+    <slot>
+      <q-icon v-if="$attrs.icon && size === 'lg'" :name="$attrs.icon" size="32px" class="q-mr-sm" />
+      <span v-html="label" :class="textClass"></span>
+    </slot>
+  </q-badge>
+</template>
+
+<script>
+  import { defineComponent, computed } from 'vue';
+  import { QBadge, QIcon } from 'quasar';
+
+  const colorStatusList = {
+    Grey: {
+      color: 'Grey_Lighten-4',
+      textColor: 'Grey_Darken-1',
+    },
+    Red: {
+      color: 'Red_Lighten-6',
+      textColor: 'Red_Lighten-1',
+    },
+    Orange: {
+      color: 'Orange_Lighten-6',
+      textColor: 'Orange_Default',
+    },
+    Yellow: {
+      color: 'Yellow_Lighten-5',
+      textColor: 'Yellow_Darken-2',
+    },
+    Green: {
+      color: 'Green_Lighten-6',
+      textColor: 'Green_Lighten-1',
+    },
+    Blue: {
+      color: 'Blue_C_Lighten-6',
+      textColor: 'Blue_C_Default',
+    },
+    Darkblue: {
+      color: 'Blue_B_Lighten-6',
+      textColor: 'Blue_B_Lighten-1',
+    },
+    Indigo: {
+      color: 'Blue_C_Lighten-7',
+      textColor: 'Blue_C_Darken-2',
+    },
+  };
+
+  export default defineComponent({
+    name: 'STag',
+    components: { QBadge, QIcon },
+    props: {
+      label: String,
+      size: {
+        /**
+         * @type {'sm' | 'md' | 'lg'} type
+         */
+        type: String,
+        default: 'md',
+      },
+      color: {
+        type: String,
+        default: 'Blue_C_Lighten-6',
+      },
+      textColor: {
+        type: String,
+        default: 'positive',
+      },
+      colorStatus: {
+        /**
+         * @type {'Grey' | 'Red' | 'Orange' | 'Yellow' | 'Green' | 'Blue' | 'Darkblue' | 'Indigo'} type
+         */
+        type: String,
+        default: '',
+      },
+      textClass: {
+        type: String,
+        default: '',
+      },
+      rounded: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const computedColor = computed(() =>
+        props.colorStatus ? colorStatusList[props.colorStatus].color : props.color,
+      );
+
+      const computedTextColor = computed(() =>
+        props.colorStatus ? colorStatusList[props.colorStatus].textColor : props.textColor,
+      );
+      return {
+        colorStatusList,
+        computedColor,
+        computedTextColor,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="scss">
+  .s-tag {
+    border-radius: 4px;
+    box-sizing: border-box;
+    &__sm {
+      padding: 1px 6px;
+      height: 20px;
+      > span {
+        line-height: 18px;
+        font: {
+          size: 11px;
+        }
+      }
+    }
+    &__md {
+      padding: 2px 8px;
+      height: 24px;
+      > span {
+        line-height: 20px;
+        font: {
+          size: 12px;
+          weight: 700;
+        }
+      }
+    }
+    &__lg {
+      padding: 4px 16px;
+      height: 48px;
+      > span {
+        line-height: 40px;
+        font: {
+          size: 24px;
+          weight: 700;
+        }
+      }
+    }
+    &__rounded {
+      border-radius: 20px;
+    }
+  }
+</style>