sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseMenuItem.vue

@@ -1,107 +1,107 @@
-<template>
-  <div :class="buttonClasses">
-    <div class="flex items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      <span :class="textSize">{{ label }}</span>
-    </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="color" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import BaseCounter from './BaseCounter.vue';
-import { ActionColors } from '@/types';
-
-const props = defineProps({
-  label: {
-    default: undefined,
-    type: String,
-  },
-  icon: {
-    default: undefined,
-    type: String,
-  },
-  active: {
-    default: false,
-    type: Boolean,
-  },
-  count: {
-    default: undefined,
-    type: Number,
-  },
-  color: {
-    default: 'dark',
-    type: String as PropType<ActionColors>,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const textColor = computed((): string => {
-  if (props.color == 'dark') {
-    return 'text-slate-700';
-  } else if (props.color == 'light') {
-    return 'text-slate-600';
-  } else if (props.color == 'danger') {
-    return 'text-red-600';
-  } else if (props.color == 'success') {
-    return 'text-green-600';
-  } else if (props.color == 'warning') {
-    return 'text-yellow-600';
-  } else if (props.color == 'primary') {
-    return 'text-primary-600';
-  } else if (props.color == 'secondary') {
-    return 'text-slate-600';
-  }
-
-  return '';
-});
-
-const textSize = computed((): string => {
-  if (props.size == 'xs') {
-    return 'text-xs';
-  } else if (props.size == 'sm') {
-    return 'text-sm';
-  } else if (props.size == 'md') {
-    return 'text-base';
-  }
-
-  return '';
-});
-
-const buttonClasses = computed((): string => {
-  let baseClasses =
-    'flex items-center justify-between w-full leading-tight py-2 text-sm text-left rounded';
-
-  baseClasses += ' ' + textColor.value;
-
-  if (!props.active) {
-    baseClasses += ' bg-white';
-  } else {
-    baseClasses += ' bg-slate-100';
-  }
-
-  if (props.icon) {
-    baseClasses += ' pl-2 pr-4';
-  } else {
-    baseClasses += ' px-4';
-  }
-
-  return baseClasses;
-});
-
-const iconClasses = computed((): string => {
-  let baseClasses = ' w-5 h-5 shrink-0 mr-2';
-
-  if (!props.active) {
-    baseClasses += ' opacity-70 ' + textColor.value;
-  }
-
-  return baseClasses;
-});
-</script>
+<template>
+  <div :class="buttonClasses">
+    <div class="flex items-center">
+      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <span :class="textSize">{{ label }}</span>
+    </div>
+    <div v-if="count" class="relative -top-px ml-[5px]">
+      <BaseCounter :count="count" :max-digit="2" :color="color" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import BaseCounter from './BaseCounter.vue';
+import { ActionColors } from '@/types';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  color: {
+    default: 'dark',
+    type: String as PropType<ActionColors>,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const textColor = computed((): string => {
+  if (props.color == 'dark') {
+    return 'text-slate-700';
+  } else if (props.color == 'light') {
+    return 'text-slate-600';
+  } else if (props.color == 'danger') {
+    return 'text-red-600';
+  } else if (props.color == 'success') {
+    return 'text-green-600';
+  } else if (props.color == 'warning') {
+    return 'text-yellow-600';
+  } else if (props.color == 'primary') {
+    return 'text-primary-600';
+  } else if (props.color == 'secondary') {
+    return 'text-slate-600';
+  }
+
+  return '';
+});
+
+const textSize = computed((): string => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  } else if (props.size == 'sm') {
+    return 'text-sm';
+  } else if (props.size == 'md') {
+    return 'text-base';
+  }
+
+  return '';
+});
+
+const buttonClasses = computed((): string => {
+  let baseClasses =
+    'flex items-center justify-between w-full leading-tight py-2 text-sm text-left rounded';
+
+  baseClasses += ' ' + textColor.value;
+
+  if (!props.active) {
+    baseClasses += ' bg-white';
+  } else {
+    baseClasses += ' bg-slate-100';
+  }
+
+  if (props.icon) {
+    baseClasses += ' pl-2 pr-4';
+  } else {
+    baseClasses += ' px-4';
+  }
+
+  return baseClasses;
+});
+
+const iconClasses = computed((): string => {
+  let baseClasses = ' w-5 h-5 shrink-0 mr-2';
+
+  if (!props.active) {
+    baseClasses += ' opacity-70 ' + textColor.value;
+  }
+
+  return baseClasses;
+});
+</script>

package/src/components/BaseModalCenter.stories.js

@@ -1,68 +1,68 @@
-import BaseModalCenter from './BaseModalCenter.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseAvatar from './BaseAvatar.vue';
-
-export default {
-  title: 'Components/BaseModalCenter',
-  component: BaseModalCenter,
-  args: {
-    position: 'bottom-right',
-  },
-  argTypes: {
-    verticalAlign: {
-      control: { type: 'select' },
-      options: ['center', 'top'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseModalCenter,
-    BaseIcon,
-    BaseAvatar,
-  },
-  setup() {
-    const show = ref(false);
-    return { args, show };
-  },
-  template: `
-    <div class="">
-      <button @click="show = true" class="btn">Show modal</button>
-      <BaseModalCenter v-model="show" v-bind="args">
-        <template #default="{close}">
-          <div class="p-8">
-            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
-
-            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
-
-            <button @click="close" class="btn mt-4">Close</button>
-          </div>
-        </template>
-      </BaseModalCenter>
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const VerticalAlignTop = Template.bind({});
-VerticalAlignTop.args = {
-  verticalAlign: 'top',
-};
-
-export const NoCloseButton = Template.bind({});
-NoCloseButton.args = {
-  showCloseButton: false,
-};
-
-export const CustomBackdropClass = Template.bind({});
-CustomBackdropClass.args = {
-  backdropClass: 'bg-red-500 bg-opacity-70',
-};
-
-export const PreventLeave = Template.bind({});
-PreventLeave.args = {
-  closeOnOutsideClick: false,
-};
+import BaseModalCenter from './BaseModalCenter.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseModalCenter',
+  component: BaseModalCenter,
+  args: {
+    position: 'bottom-right',
+  },
+  argTypes: {
+    verticalAlign: {
+      control: { type: 'select' },
+      options: ['center', 'top'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalCenter,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalCenter v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
+
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
+          </div>
+        </template>
+      </BaseModalCenter>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const VerticalAlignTop = Template.bind({});
+VerticalAlignTop.args = {
+  verticalAlign: 'top',
+};
+
+export const NoCloseButton = Template.bind({});
+NoCloseButton.args = {
+  showCloseButton: false,
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: 'bg-red-500 bg-opacity-70',
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};

package/src/components/BaseModalCenter.vue

@@ -1,125 +1,125 @@
-<template>
-  <Teleport to="body">
-    <transition
-      name="modal"
-      enter-active-class="duration-300"
-      leave-active-class="duration-200"
-    >
-      <div v-show="modelValue">
-        <div
-          data-scroll-lock-scrollable
-          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
-        >
-          <div
-            class="flex min-h-full w-full items-end justify-center overflow-hidden sm:px-6 sm:pb-6"
-            :class="[
-              showCloseButton ? 'pt-20' : 'pt-6',
-              {
-                'sm:items-center': verticalAlign == 'center',
-                'sm:items-start': verticalAlign == 'top',
-              },
-            ]"
-          >
-            <div class="pt-safe grow">
-              <transition
-                appear
-                enter-active-class="duration-300 ease-out"
-                enter-from-class="opacity-0"
-                enter-to-class="opacity-100"
-                leave-active-class="duration-200 ease-in"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-              >
-                <div
-                  v-if="modelValue"
-                  :class="backdropClass"
-                  class="fixed inset-0 transition-opacity"
-                  @click="
-                    closeOnOutsideClick
-                      ? modal.close()
-                      : modal.refuseAnimation()
-                  "
-                />
-              </transition>
-
-              <transition
-                appear
-                enter-active-class="duration-300 ease-out"
-                enter-from-class="translate-y-20 opacity-0"
-                enter-to-class="translate-y-0 opacity-100"
-                leave-active-class="duration-200 ease-in"
-                leave-from-class="translate-y-0 opacity-100"
-                leave-to-class="translate-y-20 opacity-0"
-              >
-                <div
-                  v-if="modelValue"
-                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:rounded-xl sm:shadow-xl"
-                  :style="{
-                    maxWidth: maxWidth,
-                  }"
-                  :class="[
-                    modal.animationClasses.value,
-                    clipped ? 'overflow-hidden' : '',
-                  ]"
-                >
-                  <slot :close="modal.close" />
-                </div>
-              </transition>
-            </div>
-          </div>
-
-          <button
-            v-if="showCloseButton"
-            class="right fixed top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
-            type="button"
-            @click="modal.close()"
-          >
-            <BaseIcon class="h-8 w-8 text-white" icon="heroicons:x-mark" />
-          </button>
-        </div>
-      </div>
-    </transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useModal } from '@/composables/modal';
-
-const props = defineProps({
-  modelValue: {
-    default: false,
-    type: Boolean,
-  },
-  verticalAlign: {
-    default: 'center',
-    type: String,
-  },
-  backdropClass: {
-    default: 'bg-opacity-70 bg-slate-900',
-    type: String,
-  },
-  closeOnOutsideClick: {
-    default: true,
-    type: Boolean,
-  },
-  maxWidth: {
-    default: '512px',
-    type: String,
-  },
-  showCloseButton: {
-    default: true,
-    type: Boolean,
-  },
-  clipped: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const modal = useModal(
-  computed(() => props.modelValue),
-  emit as any
-);
-</script>
+<template>
+  <Teleport to="body">
+    <transition
+      name="modal"
+      enter-active-class="duration-300"
+      leave-active-class="duration-200"
+    >
+      <div v-show="modelValue">
+        <div
+          data-scroll-lock-scrollable
+          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
+        >
+          <div
+            class="flex min-h-full w-full items-end justify-center overflow-hidden sm:px-6 sm:pb-6"
+            :class="[
+              showCloseButton ? 'pt-20' : 'pt-6',
+              {
+                'sm:items-center': verticalAlign == 'center',
+                'sm:items-start': verticalAlign == 'top',
+              },
+            ]"
+          >
+            <div class="pt-safe grow">
+              <transition
+                appear
+                enter-active-class="duration-300 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-if="modelValue"
+                  :class="backdropClass"
+                  class="fixed inset-0 transition-opacity"
+                  @click="
+                    closeOnOutsideClick
+                      ? modal.close()
+                      : modal.refuseAnimation()
+                  "
+                />
+              </transition>
+
+              <transition
+                appear
+                enter-active-class="duration-300 ease-out"
+                enter-from-class="translate-y-20 opacity-0"
+                enter-to-class="translate-y-0 opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="translate-y-0 opacity-100"
+                leave-to-class="translate-y-20 opacity-0"
+              >
+                <div
+                  v-if="modelValue"
+                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:rounded-xl sm:shadow-xl"
+                  :style="{
+                    maxWidth: maxWidth,
+                  }"
+                  :class="[
+                    modal.animationClasses.value,
+                    clipped ? 'overflow-hidden' : '',
+                  ]"
+                >
+                  <slot :close="modal.close" />
+                </div>
+              </transition>
+            </div>
+          </div>
+
+          <button
+            v-if="showCloseButton"
+            class="right fixed top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
+            type="button"
+            @click="modal.close()"
+          >
+            <BaseIcon class="h-8 w-8 text-white" icon="heroicons:x-mark" />
+          </button>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useModal } from '@/composables/modal';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  verticalAlign: {
+    default: 'center',
+    type: String,
+  },
+  backdropClass: {
+    default: 'bg-opacity-70 bg-slate-900',
+    type: String,
+  },
+  closeOnOutsideClick: {
+    default: true,
+    type: Boolean,
+  },
+  maxWidth: {
+    default: '512px',
+    type: String,
+  },
+  showCloseButton: {
+    default: true,
+    type: Boolean,
+  },
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const modal = useModal(
+  computed(() => props.modelValue),
+  emit as any
+);
+</script>