sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseInputLabel.vue

@@ -1,72 +1,72 @@
-<template>
-  <label :class="classes">
-    <div
-      class="relative"
-      :class="[help ? 'cursor-help' : 'cursor-default']"
-      @mouseenter="showTooltip = true"
-      @mouseleave="showTooltip = false"
-    >
-      <span> {{ label }}</span>
-
-      <BaseIcon
-        v-if="help"
-        class="relative bottom-px ml-1 inline h-4 w-4 text-slate-400"
-        icon="heroicons:question-mark-circle-20-solid"
-      />
-
-      <span v-if="required" class="ml-0.5 text-red-600"> *</span>
-
-      <Transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="transform scale-95 opacity-0"
-        enter-to-class="transform scale-100 opacity-100"
-        leave-active-class="transition duration-75 ease-in"
-        leave-from-class="transform scale-100 opacity-100"
-        leave-to-class="transform scale-95 opacity-0"
-      >
-        <div
-          v-if="showTooltip && help"
-          class="pointer-events-none absolute bottom-[100%] left-0 z-[1] w-auto max-w-[300px]"
-        >
-          <div
-            class="relative bottom-1 rounded-md bg-slate-700 py-1 px-2 text-xs leading-tight text-white"
-          >
-            {{ help }}
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </label>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-export default defineComponent({
-  components: { BaseIcon },
-  props: {
-    required: {
-      default: false,
-      type: Boolean,
-    },
-    label: {
-      required: true,
-      type: String,
-    },
-    classes: {
-      default: 'mb-1 block text-sm',
-      type: String,
-    },
-    help: {
-      default: null,
-      type: [String, null] as PropType<string | null>,
-    },
-  },
-  data() {
-    return {
-      showTooltip: false,
-    };
-  },
-});
-</script>
+<template>
+  <label :class="classes">
+    <div
+      class="relative"
+      :class="[help ? 'cursor-help' : 'cursor-default']"
+      @mouseenter="showTooltip = true"
+      @mouseleave="showTooltip = false"
+    >
+      <span> {{ label }}</span>
+
+      <BaseIcon
+        v-if="help"
+        class="relative bottom-px ml-1 inline h-4 w-4 text-slate-400"
+        icon="heroicons:question-mark-circle-20-solid"
+      />
+
+      <span v-if="required" class="ml-0.5 text-red-600"> *</span>
+
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform scale-95 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-75 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-95 opacity-0"
+      >
+        <div
+          v-if="showTooltip && help"
+          class="pointer-events-none absolute bottom-[100%] left-0 z-[1] w-auto max-w-[300px]"
+        >
+          <div
+            class="relative bottom-1 rounded-md bg-slate-700 py-1 px-2 text-xs leading-tight text-white"
+          >
+            {{ help }}
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </label>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default defineComponent({
+  components: { BaseIcon },
+  props: {
+    required: {
+      default: false,
+      type: Boolean,
+    },
+    label: {
+      required: true,
+      type: String,
+    },
+    classes: {
+      default: 'mb-1 block text-sm',
+      type: String,
+    },
+    help: {
+      default: null,
+      type: [String, null] as PropType<string | null>,
+    },
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
+});
+</script>

package/src/components/BaseInputPercent.stories.js

@@ -1,50 +1,50 @@
-import BaseInputPercent from './BaseInputPercent.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '@/../.storybook/utils';
-
-export default {
-  title: 'Form/BaseInputPercent',
-  component: BaseInputPercent,
-  args: {
-    placeholder: 'Enter rebate, eg: 50%',
-    step: null,
-    min: 0,
-    max: 100,
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    ShowValue,
-    BaseInputPercent,
-  },
-  setup() {
-    const value = ref(0.5);
-    return { args, value };
-  },
-  template: `
-  <form @submit.prevent="" class="border-none">
-    <BaseInputPercent v-model="value" v-bind="args" class="w-full"></BaseInputPercent>
-  </form>
-  <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  hasError: true,
-};
-
-export const Field = createFieldStory({
-  component: BaseInputPercent,
-  componentName: 'BaseInputPercent',
-  label: 'Rebate',
-});
+import BaseInputPercent from './BaseInputPercent.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '@/../.storybook/utils';
+
+export default {
+  title: 'Form/BaseInputPercent',
+  component: BaseInputPercent,
+  args: {
+    placeholder: 'Enter rebate, eg: 50%',
+    step: null,
+    min: 0,
+    max: 100,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    ShowValue,
+    BaseInputPercent,
+  },
+  setup() {
+    const value = ref(0.5);
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseInputPercent v-model="value" v-bind="args" class="w-full"></BaseInputPercent>
+  </form>
+  <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  hasError: true,
+};
+
+export const Field = createFieldStory({
+  component: BaseInputPercent,
+  componentName: 'BaseInputPercent',
+  label: 'Rebate',
+});

package/src/components/BaseInputPercent.vue

@@ -1,123 +1,123 @@
-<template>
-  <BaseInput
-    :model-value="value"
-    suffix="%"
-    type="number"
-    :required="required"
-    :prevent-submit="preventSubmit"
-    :name="name"
-    :step="stepNormalized"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :icon-left="icon"
-    :has-error="hasError"
-    :min="min"
-    :max="max"
-    @update:model-value="onUpdate"
-  ></BaseInput>
-</template>
-
-<script lang="ts" setup>
-import { isNumber, round } from 'lodash';
-import { PropType } from 'vue';
-import BaseInput from './BaseInput.vue';
-
-const props = defineProps({
-  /**
-   * The value of the input. Can be a number or null.
-   * 0.1 = 10%
-   * 0.5 = 50%
-   * 1 = 100%
-   */
-  modelValue: {
-    default: undefined,
-    type: [Number, String, null] as PropType<number | string | null>,
-  },
-  /**
-   * The step of the input. Can be a number or null.
-   */
-  step: {
-    default: 1,
-    type: Number,
-  },
-  /**
-   * Prevents submit when pressing 'Enter' while the input is focused.
-   */
-  preventSubmit: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  placeholder: {
-    default: '',
-    type: String,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  icon: {
-    default: undefined,
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  min: {
-    default: undefined,
-    type: Number,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
-
-const stepNormalized = computed<number>(() => {
-  if (props.step === undefined) return 1;
-  if (props.step === 0) return 1;
-  if (props.step === null) return 1;
-  if (!isNumber(props.step)) return 1;
-  return props.step;
-});
-
-const precision = computed(() => {
-  const parts = stepNormalized.value.toString().split('.');
-  if (parts.length === 1) return 0;
-  return parts[1].length;
-});
-
-const value = computed(() => {
-  if (props.modelValue === undefined) return null;
-  if (props.modelValue === null) return null;
-  if (props.modelValue === '') return null;
-
-  const valueToNumber = parseFloat(props.modelValue as string);
-  if (Number.isNaN(valueToNumber)) {
-    return null;
-  }
-
-  return round(valueToNumber * 100, precision.value);
-});
-
-function onUpdate(value: string | number | null) {
-  const valueToNumber = parseFloat(value as string);
-
-  if (Number.isNaN(valueToNumber)) {
-    emit('update:modelValue', null);
-    return;
-  }
-
-  emit('update:modelValue', round(valueToNumber / 100, precision.value + 2));
-}
-</script>
+<template>
+  <BaseInput
+    :model-value="value"
+    suffix="%"
+    type="number"
+    :required="required"
+    :prevent-submit="preventSubmit"
+    :name="name"
+    :step="stepNormalized"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :icon-left="icon"
+    :has-error="hasError"
+    :min="min"
+    :max="max"
+    @update:model-value="onUpdate"
+  ></BaseInput>
+</template>
+
+<script lang="ts" setup>
+import { isNumber, round } from 'lodash';
+import { PropType } from 'vue';
+import BaseInput from './BaseInput.vue';
+
+const props = defineProps({
+  /**
+   * The value of the input. Can be a number or null.
+   * 0.1 = 10%
+   * 0.5 = 50%
+   * 1 = 100%
+   */
+  modelValue: {
+    default: undefined,
+    type: [Number, String, null] as PropType<number | string | null>,
+  },
+  /**
+   * The step of the input. Can be a number or null.
+   */
+  step: {
+    default: 1,
+    type: Number,
+  },
+  /**
+   * Prevents submit when pressing 'Enter' while the input is focused.
+   */
+  preventSubmit: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+
+const stepNormalized = computed<number>(() => {
+  if (props.step === undefined) return 1;
+  if (props.step === 0) return 1;
+  if (props.step === null) return 1;
+  if (!isNumber(props.step)) return 1;
+  return props.step;
+});
+
+const precision = computed(() => {
+  const parts = stepNormalized.value.toString().split('.');
+  if (parts.length === 1) return 0;
+  return parts[1].length;
+});
+
+const value = computed(() => {
+  if (props.modelValue === undefined) return null;
+  if (props.modelValue === null) return null;
+  if (props.modelValue === '') return null;
+
+  const valueToNumber = parseFloat(props.modelValue as string);
+  if (Number.isNaN(valueToNumber)) {
+    return null;
+  }
+
+  return round(valueToNumber * 100, precision.value);
+});
+
+function onUpdate(value: string | number | null) {
+  const valueToNumber = parseFloat(value as string);
+
+  if (Number.isNaN(valueToNumber)) {
+    emit('update:modelValue', null);
+    return;
+  }
+
+  emit('update:modelValue', round(valueToNumber / 100, precision.value + 2));
+}
+</script>