sprintify-ui 0.10.64 → 0.10.65

package/src/components/BaseInputPercent.vue

@@ -1,139 +1,139 @@
-<template>
-  <BaseInput
-    ref="input"
-    :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"
-  />
-</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 input = ref<HTMLInputElement | null>(null);
-
-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));
-}
-
-function focus() {
-  input.value?.focus();
-}
-
-function blur() {
-  input.value?.blur();
-}
-
-defineExpose({
-  focus,
-  blur,
-});
-</script>
+<template>
+  <BaseInput
+    ref="input"
+    :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"
+  />
+</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 input = ref<HTMLInputElement | null>(null);
+
+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));
+}
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
+</script>

package/src/components/BaseJsonReader.stories.js

@@ -1,120 +1,120 @@
-import { sizes } from "../../.storybook/utils";
-import BaseJsonReader from "./BaseJsonReader.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-
-export default {
-  title: "Components/BaseJsonReader",
-  component: BaseJsonReader,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseJsonReader, ShowValue },
-  setup() {
-    const object = {
-      user: {
-        name: "John Doe",
-        email: "john@witify.io",
-        permissions: ["read", "create", "delete"],
-        comments: [
-          {
-            comment: "First comment",
-            replies: [
-              {
-                comment: "sub-comment 1 for comment 1",
-                replies: [
-                  {
-                    comment: "sub-sub-comment 1",
-                    replies: [
-                      {
-                        comment: "sub-sub-sub-comment 1",
-                      },
-                      {
-                        comment: {
-                          name: "sub-sub-sub-comment 2",
-                          desc: "test desc",
-                        },
-                      },
-                      {
-                        comment: {
-                          name: "sub-sub-sub-comment 3",
-                          desc: "test desc2",
-                        },
-                      },
-                    ],
-                  },
-                  { comment: "sub-sub-comment 2" },
-                ],
-              },
-              { comment: "sub-comment 2 for comment 1" },
-            ],
-          },
-
-          {
-            comment: "Second comment",
-            replies: [
-              {
-                comment: "sub-comment 1 for comment 2",
-                replies: [
-                  { comment: "sub-sub-comment 1" },
-                  { comment: "sub-sub-comment 2" },
-                ],
-              },
-              { comment: "sub-comment 2 for comment 2" },
-            ],
-          },
-        ],
-        category: {
-          id: 1,
-          name: "Other",
-        },
-        tags: {
-          id: ["create", "delete"],
-          name: {
-            id: {
-              read: {
-                id: {
-                  create: {
-                    id: {
-                      delete: {
-                        id: {
-                          update: {
-                            id: {
-                              name: "Read",
-                            },
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
-            name: "Read",
-          },
-        },
-      },
-      foo: "bar",
-    };
-
-    const value = ref(object);
-    return { value, args };
-  },
-  template: `
-    <BaseJsonReader v-model="value" v-bind="args" class="bg-red-50 border p-5 text-red-900 rounded-none">
-    </BaseJsonReader>
-    <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
-
-export const VariantCollapse = Template.bind({});
-VariantCollapse.args = {
-  variant: "collapse",
-};
+import { sizes } from "../../.storybook/utils";
+import BaseJsonReader from "./BaseJsonReader.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+
+export default {
+  title: "Components/BaseJsonReader",
+  component: BaseJsonReader,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseJsonReader, ShowValue },
+  setup() {
+    const object = {
+      user: {
+        name: "John Doe",
+        email: "john@witify.io",
+        permissions: ["read", "create", "delete"],
+        comments: [
+          {
+            comment: "First comment",
+            replies: [
+              {
+                comment: "sub-comment 1 for comment 1",
+                replies: [
+                  {
+                    comment: "sub-sub-comment 1",
+                    replies: [
+                      {
+                        comment: "sub-sub-sub-comment 1",
+                      },
+                      {
+                        comment: {
+                          name: "sub-sub-sub-comment 2",
+                          desc: "test desc",
+                        },
+                      },
+                      {
+                        comment: {
+                          name: "sub-sub-sub-comment 3",
+                          desc: "test desc2",
+                        },
+                      },
+                    ],
+                  },
+                  { comment: "sub-sub-comment 2" },
+                ],
+              },
+              { comment: "sub-comment 2 for comment 1" },
+            ],
+          },
+
+          {
+            comment: "Second comment",
+            replies: [
+              {
+                comment: "sub-comment 1 for comment 2",
+                replies: [
+                  { comment: "sub-sub-comment 1" },
+                  { comment: "sub-sub-comment 2" },
+                ],
+              },
+              { comment: "sub-comment 2 for comment 2" },
+            ],
+          },
+        ],
+        category: {
+          id: 1,
+          name: "Other",
+        },
+        tags: {
+          id: ["create", "delete"],
+          name: {
+            id: {
+              read: {
+                id: {
+                  create: {
+                    id: {
+                      delete: {
+                        id: {
+                          update: {
+                            id: {
+                              name: "Read",
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            name: "Read",
+          },
+        },
+      },
+      foo: "bar",
+    };
+
+    const value = ref(object);
+    return { value, args };
+  },
+  template: `
+    <BaseJsonReader v-model="value" v-bind="args" class="bg-red-50 border p-5 text-red-900 rounded-none">
+    </BaseJsonReader>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+
+export const VariantCollapse = Template.bind({});
+VariantCollapse.args = {
+  variant: "collapse",
+};

package/src/components/BaseJsonReader.vue

@@ -1,52 +1,52 @@
-<template>
-  <div 
-    :class="classes"
-  >
-    <ul>
-      <BaseJsonReaderItem
-        v-for="(value, key) in modelValue"
-        :key="key"
-        :size="size"
-        :label="key"
-        :variant="variant"
-        :model-value="value"
-      />
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Size, sizes } from '@/utils/sizes';
-import { twMerge } from 'tailwind-merge';
-import BaseJsonReaderItem from './BaseJsonReaderItem.vue';
-import { JsonData } from '@/types';
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: JsonData;
-    size?: Size;
-    variant?: 'list' | 'collapse';
-    class?: string | string[];
-  }>(),
-  {
-    size: 'sm',
-    variant: 'list',
-    class: undefined,
-  }
-);
-
-const classes = computed(() => {
-  const base = 'bg-slate-100 p-2 rounded-md text-sm text-slate-800';
-  const sizeConfig = sizes[props.size];
-
-  return twMerge(
-    base,
-    sizeConfig.fontSize,
-    props.class,
-  );
-});
+<template>
+  <div 
+    :class="classes"
+  >
+    <ul>
+      <BaseJsonReaderItem
+        v-for="(value, key) in modelValue"
+        :key="key"
+        :size="size"
+        :label="key"
+        :variant="variant"
+        :model-value="value"
+      />
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Size, sizes } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
+import BaseJsonReaderItem from './BaseJsonReaderItem.vue';
+import { JsonData } from '@/types';
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: JsonData;
+    size?: Size;
+    variant?: 'list' | 'collapse';
+    class?: string | string[];
+  }>(),
+  {
+    size: 'sm',
+    variant: 'list',
+    class: undefined,
+  }
+);
+
+const classes = computed(() => {
+  const base = 'bg-slate-100 p-2 rounded-md text-sm text-slate-800';
+  const sizeConfig = sizes[props.size];
+
+  return twMerge(
+    base,
+    sizeConfig.fontSize,
+    props.class,
+  );
+});
 </script>