sprintify-ui 0.10.63 → 0.10.65

package/src/components/BasePanel.stories.js

@@ -1,56 +1,56 @@
-import BaseContainer from "./BaseContainer.vue";
-import BasePanel from "./BasePanel.vue";
-import BaseCard from "./BaseCard.vue";
-import BaseCardRow from "./BaseCardRow.vue";
-import BaseInputLabel from "./BaseInputLabel.vue";
-import BaseInput from "./BaseInput.vue";
-
-export default {
-  title: "Layout/BasePanel",
-  component: BasePanel,
-  args: {
-    title: "General information",
-    description:
-      "Enter general user information, name and age. User must be more than 10 years old to participate.",
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseContainer,
-    BasePanel,
-    BaseCard,
-    BaseCardRow,
-    BaseInputLabel,
-    BaseInput,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <div class="bg-slate-100 py-10">
-    <BaseContainer>
-      <BasePanel v-bind="args">
-        <BaseCard>
-          <BaseCardRow>
-            <div class="mb-4">
-              <BaseInputLabel label="Name" />
-              <BaseInput name="name" class="w-full" placeholder="Enter you name" />
-            </div>
-
-            <div class="mb-4">
-              <BaseInputLabel label="Age" />
-              <BaseInput name="age" class="w-full" placeholder="Enter you age" />
-            </div>
-
-            <button class="btn btn-primary mt-2">Submit</button>
-          </BaseCardRow>
-        </BaseCard>
-      </BasePanel>
-    </BaseContainer>
-  </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseContainer from "./BaseContainer.vue";
+import BasePanel from "./BasePanel.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
+import BaseInputLabel from "./BaseInputLabel.vue";
+import BaseInput from "./BaseInput.vue";
+
+export default {
+  title: "Layout/BasePanel",
+  component: BasePanel,
+  args: {
+    title: "General information",
+    description:
+      "Enter general user information, name and age. User must be more than 10 years old to participate.",
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseContainer,
+    BasePanel,
+    BaseCard,
+    BaseCardRow,
+    BaseInputLabel,
+    BaseInput,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <BasePanel v-bind="args">
+        <BaseCard>
+          <BaseCardRow>
+            <div class="mb-4">
+              <BaseInputLabel label="Name" />
+              <BaseInput name="name" class="w-full" placeholder="Enter you name" />
+            </div>
+
+            <div class="mb-4">
+              <BaseInputLabel label="Age" />
+              <BaseInput name="age" class="w-full" placeholder="Enter you age" />
+            </div>
+
+            <button class="btn btn-primary mt-2">Submit</button>
+          </BaseCardRow>
+        </BaseCard>
+      </BasePanel>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BasePanel.vue

@@ -1,42 +1,42 @@
-<template>
-  <div
-    class="pb-8 md:grid md:grid-cols-3 md:gap-8"
-    :class="[bordered ? 'mb-8 border-b border-slate-300' : '']"
-  >
-    <div class="px-4 md:col-span-1 md:px-0">
-      <h3 class="text-base font-semibold leading-6 text-slate-900">
-        {{ title }}
-      </h3>
-      <p
-        v-if="description"
-        class="mt-1 text-sm leading-normal opacity-50"
-      >
-        {{ description }}
-      </p>
-    </div>
-    <div class="mt-5 md:col-span-2 md:mt-0">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    title: {
-      required: true,
-      type: String,
-    },
-    description: {
-      default: null,
-      type: String,
-    },
-    bordered: {
-      default: false,
-      type: Boolean,
-    },
-  },
-});
-</script>
+<template>
+  <div
+    class="pb-8 md:grid md:grid-cols-3 md:gap-8"
+    :class="[bordered ? 'mb-8 border-b border-slate-300' : '']"
+  >
+    <div class="px-4 md:col-span-1 md:px-0">
+      <h3 class="text-base font-semibold leading-6 text-slate-900">
+        {{ title }}
+      </h3>
+      <p
+        v-if="description"
+        class="mt-1 text-sm leading-normal opacity-50"
+      >
+        {{ description }}
+      </p>
+    </div>
+    <div class="mt-5 md:col-span-2 md:mt-0">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: {
+      required: true,
+      type: String,
+    },
+    description: {
+      default: null,
+      type: String,
+    },
+    bordered: {
+      default: false,
+      type: Boolean,
+    },
+  },
+});
+</script>

package/src/components/BasePassword.stories.js

@@ -1,80 +1,80 @@
-import { sizes } from "../../.storybook/utils";
-import BasePassword from "./BasePassword.vue";
-import { createFieldStory } from "@/../.storybook/utils";
-
-export default {
-  title: "Form/BasePassword",
-  component: BasePassword,
-  args: {},
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BasePassword,
-  },
-  setup() {
-    const value = ref("");
-    return { args, value };
-  },
-  template: `
-  <form @submit.prevent="">
-    <BasePassword class="border-slate-300" v-model="value" v-bind="args"></BasePassword>
-  </form>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  required: true,
-  placeholder: "Enter your password",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  placeholder: "Enter your password",
-};
-
-export const Field = createFieldStory({
-  component: BasePassword,
-  componentName: "BasePassword",
-  label: "Password",
-});
-
-const FocusTemplate = (args) => ({
-  components: { BasePassword },
-  setup() {
-    const value = ref(null);
-    const input = ref(null);
-    return { args, value, input };
-  },
-  template: `
-    <BasePassword ref="input" v-model="value" v-bind="args" class="w-full"></BasePassword>
-
-    <button @click="input.focus()" class="mt-4 underline">Focus</button>
-  `,
-});
-
-const TemplateSizes = (args) => ({
-  components: { BasePassword },
-  setup() {
-    const value = ref(null);
-    return { args, value, sizes };
-  },
-  template: `
-  <div v-for="size in sizes" :key="size" class="mb-4">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
-    <BasePassword v-model="value" v-bind="args" :size="size" class="w-full"></BasePassword>
-  </div>
-  `,
-});
-
-export const Sizes = TemplateSizes.bind({});
-
-export const Focus = FocusTemplate.bind({});
+import { sizes } from "../../.storybook/utils";
+import BasePassword from "./BasePassword.vue";
+import { createFieldStory } from "@/../.storybook/utils";
+
+export default {
+  title: "Form/BasePassword",
+  component: BasePassword,
+  args: {},
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BasePassword,
+  },
+  setup() {
+    const value = ref("");
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="">
+    <BasePassword class="border-slate-300" v-model="value" v-bind="args"></BasePassword>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  required: true,
+  placeholder: "Enter your password",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  placeholder: "Enter your password",
+};
+
+export const Field = createFieldStory({
+  component: BasePassword,
+  componentName: "BasePassword",
+  label: "Password",
+});
+
+const FocusTemplate = (args) => ({
+  components: { BasePassword },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BasePassword ref="input" v-model="value" v-bind="args" class="w-full"></BasePassword>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+const TemplateSizes = (args) => ({
+  components: { BasePassword },
+  setup() {
+    const value = ref(null);
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BasePassword v-model="value" v-bind="args" :size="size" class="w-full"></BasePassword>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BasePassword.vue

@@ -1,87 +1,87 @@
-<template>
-  <BaseInput
-    ref="input"
-    :model-value="modelValue"
-    :type="showPassword ? 'text' : 'password'"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :size="size"
-    :icon-right="showPassword ? 'heroicons:eye-20-solid' : 'heroicons:eye-slash-20-solid'"
-    @icon-right-click="onIconRightClick"
-    @update:model-value="onUpdateModelValue"
-    @focus="onFocus"
-    @blur="onBlur"
-  />
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Size } from '@/utils/sizes';
-import BaseInput from './BaseInput.vue';
-
-const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
-
-const props = defineProps({
-  modelValue: {
-    default: '',
-    type: [String, null] as PropType<string | null>,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: undefined,
-    type: String as PropType<Size>,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  placeholder: {
-    default: undefined,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const input = ref<HTMLInputElement | null>(null);
-
-const showPassword = ref(false);
-
-function onIconRightClick() {
-  showPassword.value = !showPassword.value;
-}
-
-function focus() {
-  input.value?.focus();
-}
-
-function blur() {
-  input.value?.blur();
-}
-
-function onUpdateModelValue(value: string) {
-  emit('update:modelValue', value);
-}
-
-function onBlur() {
-  emit('blur');
-}
-
-function onFocus() {
-  emit('focus');
-}
-
-defineExpose({
-  focus,
-  blur,
-});
-</script>
+<template>
+  <BaseInput
+    ref="input"
+    :model-value="modelValue"
+    :type="showPassword ? 'text' : 'password'"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :size="size"
+    :icon-right="showPassword ? 'heroicons:eye-20-solid' : 'heroicons:eye-slash-20-solid'"
+    @icon-right-click="onIconRightClick"
+    @update:model-value="onUpdateModelValue"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Size } from '@/utils/sizes';
+import BaseInput from './BaseInput.vue';
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: [String, null] as PropType<string | null>,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const input = ref<HTMLInputElement | null>(null);
+
+const showPassword = ref(false);
+
+function onIconRightClick() {
+  showPassword.value = !showPassword.value;
+}
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+function onUpdateModelValue(value: string) {
+  emit('update:modelValue', value);
+}
+
+function onBlur() {
+  emit('blur');
+}
+
+function onFocus() {
+  emit('focus');
+}
+
+defineExpose({
+  focus,
+  blur,
+});
+</script>

package/src/components/BaseProgressCircle.stories.js

@@ -1,27 +1,27 @@
-import BaseProgressCircle from "./BaseProgressCircle.vue";
-
-export default {
-  title: "Components/BaseProgressCircle",
-  component: BaseProgressCircle,
-  args: {
-    class: "text-primary-500",
-    radius: 100,
-    stroke: 5,
-    progress: 0.6,
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseProgressCircle,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseProgressCircle v-bind="args"></BaseProgressCircle>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseProgressCircle from "./BaseProgressCircle.vue";
+
+export default {
+  title: "Components/BaseProgressCircle",
+  component: BaseProgressCircle,
+  args: {
+    class: "text-primary-500",
+    radius: 100,
+    stroke: 5,
+    progress: 0.6,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseProgressCircle,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseProgressCircle v-bind="args"></BaseProgressCircle>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};