sprintify-ui 0.2.19 → 0.2.21

package/src/components/BaseCounter.vue

@@ -1,82 +1,82 @@
-<template>
-  <div
-    class="inline-flex w-auto items-center justify-center rounded-full"
-    :class="[sizeClass, colorClass]"
-  >
-    {{ countLabel }}
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ActionColors } from '@/types';
-import { padStart } from 'lodash';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  count: {
-    required: true,
-    type: Number,
-  },
-  maxDigit: {
-    default: 3,
-    type: Number,
-  },
-  size: {
-    default: 'sm',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-  color: {
-    default: 'danger',
-    type: String as PropType<ActionColors>,
-  },
-});
-
-const countLabel = computed((): string => {
-  const realMaxDigit = Math.max(1, props.maxDigit);
-
-  const countString = props.count + '';
-  const numberOfDigit = countString.length;
-  if (numberOfDigit > realMaxDigit) {
-    return padStart('+', realMaxDigit + 1, '9');
-  }
-  return countString;
-});
-
-const sizeClass = computed((): string => {
-  if (props.size == 'xs') {
-    return 'text-[10px] px-1 h-[14px]';
-  }
-  if (props.size == 'sm') {
-    return 'text-xs px-1.5 h-4';
-  }
-  if (props.size == 'md') {
-    return 'text-sm px-1.5 h-5';
-  }
-  return 'text-xs px-1.5 h-4';
-});
-
-const colorClass = computed((): string => {
-  if (props.color == 'danger') {
-    return 'bg-red-500 text-white';
-  }
-  if (props.color == 'warning') {
-    return 'bg-yellow-400 text-white';
-  }
-  if (props.color == 'success') {
-    return 'bg-green-500 text-white';
-  }
-  if (props.color == 'primary') {
-    return 'bg-primary-500 text-white';
-  }
-  if (props.color == 'secondary') {
-    return 'bg-primary-200 text-primary-800';
-  }
-  if (props.color == 'dark') {
-    return 'bg-slate-900 text-white';
-  }
-  if (props.color == 'light') {
-    return 'bg-slate-200 text-slate-900';
-  }
-  return 'bg-white text-slate-900';
-});
-</script>
+<template>
+  <div
+    class="inline-flex w-auto items-center justify-center rounded-full"
+    :class="[sizeClass, colorClass]"
+  >
+    {{ countLabel }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ActionColors } from '@/types';
+import { padStart } from 'lodash';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  count: {
+    required: true,
+    type: Number,
+  },
+  maxDigit: {
+    default: 3,
+    type: Number,
+  },
+  size: {
+    default: 'sm',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+  color: {
+    default: 'danger',
+    type: String as PropType<ActionColors>,
+  },
+});
+
+const countLabel = computed((): string => {
+  const realMaxDigit = Math.max(1, props.maxDigit);
+
+  const countString = props.count + '';
+  const numberOfDigit = countString.length;
+  if (numberOfDigit > realMaxDigit) {
+    return padStart('+', realMaxDigit + 1, '9');
+  }
+  return countString;
+});
+
+const sizeClass = computed((): string => {
+  if (props.size == 'xs') {
+    return 'text-[10px] px-1 h-[14px]';
+  }
+  if (props.size == 'sm') {
+    return 'text-xs px-1.5 h-4';
+  }
+  if (props.size == 'md') {
+    return 'text-sm px-1.5 h-5';
+  }
+  return 'text-xs px-1.5 h-4';
+});
+
+const colorClass = computed((): string => {
+  if (props.color == 'danger') {
+    return 'bg-red-500 text-white';
+  }
+  if (props.color == 'warning') {
+    return 'bg-yellow-400 text-white';
+  }
+  if (props.color == 'success') {
+    return 'bg-green-500 text-white';
+  }
+  if (props.color == 'primary') {
+    return 'bg-primary-500 text-white';
+  }
+  if (props.color == 'secondary') {
+    return 'bg-primary-200 text-primary-800';
+  }
+  if (props.color == 'dark') {
+    return 'bg-slate-900 text-white';
+  }
+  if (props.color == 'light') {
+    return 'bg-slate-200 text-slate-900';
+  }
+  return 'bg-white text-slate-900';
+});
+</script>

package/src/components/BaseCropper.stories.js

@@ -1,113 +1,113 @@
-import BaseCropper from '@/components/BaseCropper.vue';
-import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-export default {
-  title: 'Form/BaseCropper',
-  component: BaseCropper,
-  args: {
-    source:
-      'https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80',
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseCropper,
-    BaseIcon,
-    BaseLoadingCover,
-    BaseAppNotifications,
-  },
-  setup() {
-    const cropperRef = ref(null);
-
-    function saveAsCanvas() {
-      cropperRef.value.save({
-        type: 'canvas',
-        size: 'original',
-      });
-    }
-
-    return { args, saveAsCanvas, cropperRef };
-  },
-  template: `
-    <BaseCropper ref="cropperRef" v-bind="args">
-      <template #footer="{cancelCrop, initializing, rotateLeft, rotateRight}">
-        <div class="mt-1 flex flex-wrap gap-2">
-          <button
-            type="button"
-            :disabled="initializing"
-            class="btn btn-sm"
-            @click="rotateLeft()"
-          >
-            Rotate Left
-          </button>
-
-          <button
-            type="button"
-            :disabled="initializing"
-            class="btn btn-sm"
-            @click="rotateRight()"
-          >
-            Rotate Right
-          </button>
-
-          <button
-            type="button"
-            :disabled="!initializing"
-            class="btn btn-sm"
-            @click="cancelCrop()"
-          >
-            Cancel
-          </button>
-
-          <button
-            type="button"
-            :disabled="initializing"
-            class="btn btn-sm"
-            @click="saveAsCanvas()"
-          >
-            Save as Canvas
-          </button>
-        </div>
-      </template>
-    </BaseCropper>
-
-    <BaseAppNotifications></BaseAppNotifications>
-  `,
-});
-
-export const Demo = Template.bind({});
-
-Demo.args = {
-  config: {
-    height: 200,
-    width: 200,
-    viewport: {
-      width: 200,
-      height: 200,
-      type: 'rectangle',
-    },
-    boundary: {
-      width: 200,
-      height: 200,
-    },
-  },
-};
-
-export const Avatar = Template.bind({});
-
-Avatar.args = {
-  preset: 'avatar',
-};
-
-export const Cover = Template.bind({});
-
-Cover.args = {
-  preset: 'cover',
-  presetOptions: {
-    size: 400,
-    ratio: 16 / 9,
-  },
-};
+import BaseCropper from '@/components/BaseCropper.vue';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Media/BaseCropper',
+  component: BaseCropper,
+  args: {
+    source:
+      'https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCropper,
+    BaseIcon,
+    BaseLoadingCover,
+    BaseAppNotifications,
+  },
+  setup() {
+    const cropperRef = ref(null);
+
+    function saveAsCanvas() {
+      cropperRef.value.save({
+        type: 'canvas',
+        size: 'original',
+      });
+    }
+
+    return { args, saveAsCanvas, cropperRef };
+  },
+  template: `
+    <BaseCropper ref="cropperRef" v-bind="args">
+      <template #footer="{cancelCrop, initializing, rotateLeft, rotateRight}">
+        <div class="mt-1 flex flex-wrap gap-2">
+          <button
+            type="button"
+            :disabled="initializing"
+            class="btn btn-sm"
+            @click="rotateLeft()"
+          >
+            Rotate Left
+          </button>
+
+          <button
+            type="button"
+            :disabled="initializing"
+            class="btn btn-sm"
+            @click="rotateRight()"
+          >
+            Rotate Right
+          </button>
+
+          <button
+            type="button"
+            :disabled="!initializing"
+            class="btn btn-sm"
+            @click="cancelCrop()"
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            :disabled="initializing"
+            class="btn btn-sm"
+            @click="saveAsCanvas()"
+          >
+            Save as Canvas
+          </button>
+        </div>
+      </template>
+    </BaseCropper>
+
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Demo = Template.bind({});
+
+Demo.args = {
+  config: {
+    height: 200,
+    width: 200,
+    viewport: {
+      width: 200,
+      height: 200,
+      type: 'rectangle',
+    },
+    boundary: {
+      width: 200,
+      height: 200,
+    },
+  },
+};
+
+export const Avatar = Template.bind({});
+
+Avatar.args = {
+  preset: 'avatar',
+};
+
+export const Cover = Template.bind({});
+
+Cover.args = {
+  preset: 'cover',
+  presetOptions: {
+    size: 400,
+    ratio: 16 / 9,
+  },
+};