sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseNavbarSideItemContent.vue

@@ -1,104 +1,104 @@
-<template>
-  <div :class="classes">
-    <div class="group flex grow items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      <span>{{ label }}</span>
-    </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter
-        :size="size"
-        :count="count"
-        :max-digit="2"
-        :color="'primary'"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Icon as BaseIcon } from '@iconify/vue';
-import { PropType } from 'vue';
-import BaseCounter from './BaseCounter.vue';
-
-const props = defineProps({
-  label: {
-    default: undefined,
-    type: String,
-  },
-  icon: {
-    default: undefined,
-    type: String,
-  },
-  active: {
-    default: false,
-    type: Boolean,
-  },
-  count: {
-    default: undefined,
-    type: Number,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const classes = computed(() => {
-  const classList = ['text-left rounded-md flex w-full'];
-
-  if (props.active) {
-    if (props.dark) {
-      classList.push('bg-slate-700 text-white');
-    } else {
-      classList.push('bg-slate-100 text-primary-700');
-    }
-  } else {
-    if (props.dark) {
-      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
-    } else {
-      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
-    }
-  }
-
-  if (props.size == 'xs') {
-    classList.push('text-[13px] px-2.5 py-1 font-medium');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('text-sm px-3 py-1.5 font-medium');
-  }
-
-  if (props.size == 'md') {
-    classList.push('text-base px-3 py-2 font-medium');
-  }
-
-  return classList;
-});
-
-const iconClasses = computed((): string[] => {
-  const classList = ['shrink-0 leading-none inline-block'];
-  if (props.active) {
-    classList.push('opacity-100');
-  } else {
-    classList.push('opacity-70 group-hover:opacity-100');
-  }
-
-  if (props.size == 'xs') {
-    classList.push('w-3.5 h-3.5 mr-2');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('w-4 h-4 mr-2');
-  }
-
-  if (props.size == 'md') {
-    classList.push('w-5 h-5 mr-2');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <div :class="classes">
+    <div class="group flex grow items-center">
+      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <span>{{ label }}</span>
+    </div>
+    <div v-if="count" class="relative -top-px ml-[5px]">
+      <BaseCounter
+        :size="size"
+        :count="count"
+        :max-digit="2"
+        :color="'primary'"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
+import BaseCounter from './BaseCounter.vue';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const classes = computed(() => {
+  const classList = ['text-left rounded-md flex w-full'];
+
+  if (props.active) {
+    if (props.dark) {
+      classList.push('bg-slate-700 text-white');
+    } else {
+      classList.push('bg-slate-100 text-primary-700');
+    }
+  } else {
+    if (props.dark) {
+      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
+    } else {
+      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
+    }
+  }
+
+  if (props.size == 'xs') {
+    classList.push('text-[13px] px-2.5 py-1 font-medium');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('text-sm px-3 py-1.5 font-medium');
+  }
+
+  if (props.size == 'md') {
+    classList.push('text-base px-3 py-2 font-medium');
+  }
+
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['shrink-0 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('w-3.5 h-3.5 mr-2');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('w-4 h-4 mr-2');
+  }
+
+  if (props.size == 'md') {
+    classList.push('w-5 h-5 mr-2');
+  }
+
+  return classList;
+});
+</script>

package/src/components/BaseNumber.stories.js

@@ -1,66 +1,66 @@
-import BaseNumber from './BaseNumber.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '@/../.storybook/utils';
-
-export default {
-  title: 'Form/BaseNumber',
-  component: BaseNumber,
-  args: {
-    placeholder: 'Enter number',
-    step: 0.1,
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    ShowValue,
-    BaseNumber,
-  },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-  <form @submit.prevent="" class="border-none">
-    <BaseNumber v-model="value" v-bind="args" class=""></BaseNumber>
-  </form>
-  <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Min = Template.bind({});
-Min.args = {
-  min: 10000,
-};
-
-export const Max = Template.bind({});
-Max.args = {
-  max: 10000,
-};
-
-export const AutoFix = Template.bind({});
-AutoFix.args = {
-  autoFix: true,
-  min: 10,
-  max: 20,
-  step: 0.01,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  hasError: true,
-};
-
-export const Field = createFieldStory({
-  component: BaseNumber,
-  componentName: 'BaseNumber',
-  label: 'Rebate',
-});
+import BaseNumber from './BaseNumber.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '@/../.storybook/utils';
+
+export default {
+  title: 'Form/BaseNumber',
+  component: BaseNumber,
+  args: {
+    placeholder: 'Enter number',
+    step: 0.1,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    ShowValue,
+    BaseNumber,
+  },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseNumber v-model="value" v-bind="args" class=""></BaseNumber>
+  </form>
+  <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Min = Template.bind({});
+Min.args = {
+  min: 10000,
+};
+
+export const Max = Template.bind({});
+Max.args = {
+  max: 10000,
+};
+
+export const AutoFix = Template.bind({});
+AutoFix.args = {
+  autoFix: true,
+  min: 10,
+  max: 20,
+  step: 0.01,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  hasError: true,
+};
+
+export const Field = createFieldStory({
+  component: BaseNumber,
+  componentName: 'BaseNumber',
+  label: 'Rebate',
+});