sprintify-ui 0.1.15 → 0.1.17

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,39 +1,39 @@
-<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 text-slate-600">
-        {{ 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 text-slate-600">
+        {{ 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,41 +1,41 @@
-import BasePassword from './BasePassword.vue';
-import { createFieldStory } from '@/../.storybook/utils';
-
-export default {
-  title: 'Form/BasePassword',
-  component: BasePassword,
-  args: {},
-};
-
-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',
-});
+import BasePassword from './BasePassword.vue';
+import { createFieldStory } from '@/../.storybook/utils';
+
+export default {
+  title: 'Form/BasePassword',
+  component: BasePassword,
+  args: {},
+};
+
+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',
+});

package/src/components/BasePassword.vue

@@ -1,88 +1,88 @@
-<template>
-  <div
-    class="flex rounded border bg-white"
-    :class="[
-      disabled ? 'cursor-not-allowed text-slate-300' : '',
-      hasErrorInternal ? 'border-red-500' : 'border-slate-300',
-    ]"
-  >
-    <input
-      ref="input"
-      :value="modelValue"
-      :type="showPassword ? 'text' : 'password'"
-      :name="nameInternal"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :required="requiredInternal"
-      class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
-      @input="onInput"
-    />
-    <div class="flex shrink-0 pl-3">
-      <button
-        tabindex="-1"
-        type="button"
-        class="pr-3 text-slate-500 disabled:cursor-not-allowed disabled:text-slate-300"
-        :disabled="disabled"
-        @click="showPassword = !showPassword"
-      >
-        <BaseIcon
-          v-if="!showPassword"
-          icon="heroicons:eye-slash-20-solid"
-          class="h-5 w-5"
-        />
-        <BaseIcon v-else icon="heroicons:eye-20-solid" class="h-5 w-5" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { trim } from 'lodash';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { PropType } from 'vue';
-import { useField } from '@/composables/field';
-
-const props = defineProps({
-  modelValue: {
-    default: '',
-    type: [String, null] as PropType<string | null>,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  placeholder: {
-    default: undefined,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
-  useField({
-    name: computed(() => props.name),
-    required: computed(() => props.required),
-    hasError: computed(() => props.hasError),
-    emit: emit,
-  });
-
-const showPassword = ref(false);
-
-function onInput(event: any) {
-  const value = event.target.value + '';
-  emitUpdate(trim(value));
-}
-</script>
+<template>
+  <div
+    class="flex rounded border bg-white"
+    :class="[
+      disabled ? 'cursor-not-allowed text-slate-300' : '',
+      hasErrorInternal ? 'border-red-500' : 'border-slate-300',
+    ]"
+  >
+    <input
+      ref="input"
+      :value="modelValue"
+      :type="showPassword ? 'text' : 'password'"
+      :name="nameInternal"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :required="requiredInternal"
+      class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
+      @input="onInput"
+    />
+    <div class="flex shrink-0 pl-3">
+      <button
+        tabindex="-1"
+        type="button"
+        class="pr-3 text-slate-500 disabled:cursor-not-allowed disabled:text-slate-300"
+        :disabled="disabled"
+        @click="showPassword = !showPassword"
+      >
+        <BaseIcon
+          v-if="!showPassword"
+          icon="heroicons:eye-slash-20-solid"
+          class="h-5 w-5"
+        />
+        <BaseIcon v-else icon="heroicons:eye-20-solid" class="h-5 w-5" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { trim } from 'lodash';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
+import { useField } from '@/composables/field';
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: [String, null] as PropType<string | null>,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
+
+const showPassword = ref(false);
+
+function onInput(event: any) {
+  const value = event.target.value + '';
+  emitUpdate(trim(value));
+}
+</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 = {};

package/src/components/BaseProgressCircle.vue

@@ -1,77 +1,77 @@
-<template>
-  <svg :height="radius * 2" :width="radius * 2">
-    <circle
-      stroke="currentColor"
-      class="text-slate-200"
-      :stroke-width="stroke"
-      fill="transparent"
-      :r="normalizedRadius"
-      :cx="radius"
-      :cy="radius"
-    />
-    <circle
-      stroke="currentColor"
-      :stroke-dasharray="`${circumference} ${circumference}`"
-      :style="{ strokeDashoffset: strokeDashoffset }"
-      :stroke-width="stroke"
-      fill="transparent"
-      :r="normalizedRadius"
-      :cx="radius"
-      :cy="radius"
-    />
-    <text
-      text-anchor="middle"
-      alignment-baseline="middle"
-      :x="radius"
-      :y="radius + fontSize / 10"
-      :style="{ fontSize: fontSize + 'px', fontWeight: 600 }"
-    >
-      {{ Math.round(progress * 100) }}%
-    </text>
-  </svg>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    radius: {
-      default: 10,
-      type: Number,
-    },
-    stroke: {
-      default: 1,
-      type: Number,
-    },
-    progress: {
-      default: 0.5,
-      type: Number,
-    },
-  },
-  computed: {
-    normalizedRadius(): number {
-      return this.radius - this.stroke * 2;
-    },
-    circumference(): number {
-      return this.normalizedRadius * 2 * Math.PI;
-    },
-    strokeDashoffset(): number {
-      const offset =
-        this.circumference - Math.min(1, this.progress) * this.circumference;
-      return offset;
-    },
-    fontSize(): number {
-      return Math.min(30, this.radius / 2.7);
-    },
-  },
-});
-</script>
-
-<style scoped>
-circle {
-  transition: stroke-dashoffset 0.35s;
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
-}
-</style>
+<template>
+  <svg :height="radius * 2" :width="radius * 2">
+    <circle
+      stroke="currentColor"
+      class="text-slate-200"
+      :stroke-width="stroke"
+      fill="transparent"
+      :r="normalizedRadius"
+      :cx="radius"
+      :cy="radius"
+    />
+    <circle
+      stroke="currentColor"
+      :stroke-dasharray="`${circumference} ${circumference}`"
+      :style="{ strokeDashoffset: strokeDashoffset }"
+      :stroke-width="stroke"
+      fill="transparent"
+      :r="normalizedRadius"
+      :cx="radius"
+      :cy="radius"
+    />
+    <text
+      text-anchor="middle"
+      alignment-baseline="middle"
+      :x="radius"
+      :y="radius + fontSize / 10"
+      :style="{ fontSize: fontSize + 'px', fontWeight: 600 }"
+    >
+      {{ Math.round(progress * 100) }}%
+    </text>
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    radius: {
+      default: 10,
+      type: Number,
+    },
+    stroke: {
+      default: 1,
+      type: Number,
+    },
+    progress: {
+      default: 0.5,
+      type: Number,
+    },
+  },
+  computed: {
+    normalizedRadius(): number {
+      return this.radius - this.stroke * 2;
+    },
+    circumference(): number {
+      return this.normalizedRadius * 2 * Math.PI;
+    },
+    strokeDashoffset(): number {
+      const offset =
+        this.circumference - Math.min(1, this.progress) * this.circumference;
+      return offset;
+    },
+    fontSize(): number {
+      return Math.min(30, this.radius / 2.7);
+    },
+  },
+});
+</script>
+
+<style scoped>
+circle {
+  transition: stroke-dashoffset 0.35s;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+}
+</style>