sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseAlert.stories.js

@@ -1,52 +1,52 @@
-import BaseAlert from './BaseAlert.vue';
-
-export default {
-  title: 'Components/BaseAlert',
-  component: BaseAlert,
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: ['success', 'info', 'warning', 'danger'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseAlert },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseAlert v-bind="args">
-      <p>Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis. Excepteur officia mollit aute sint quis nisi sint.</p>
-    </BaseAlert>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  title: 'Be careful',
-  color: 'warning',
-  bordered: true,
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  title: 'Success',
-  color: 'success',
-  bordered: true,
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  title: 'Error',
-  color: 'danger',
-  bordered: true,
-};
-
-export const Info = Template.bind({});
-Info.args = {
-  title: 'Information',
-  color: 'info',
-  bordered: true,
-};
+import BaseAlert from './BaseAlert.vue';
+
+export default {
+  title: 'Components/BaseAlert',
+  component: BaseAlert,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['success', 'info', 'warning', 'danger'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseAlert v-bind="args">
+      <p>Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis. Excepteur officia mollit aute sint quis nisi sint.</p>
+    </BaseAlert>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  title: 'Be careful',
+  color: 'warning',
+  bordered: true,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  title: 'Success',
+  color: 'success',
+  bordered: true,
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  title: 'Error',
+  color: 'danger',
+  bordered: true,
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  title: 'Information',
+  color: 'info',
+  bordered: true,
+};

package/src/components/BaseAlert.vue

@@ -1,152 +1,152 @@
-<template>
-  <div
-    class="flex w-full items-start rounded-md p-4"
-    :class="[backgroundClass, borderClass]"
-  >
-    <div v-if="showIcon" class="mr-3">
-      <BaseIcon
-        v-if="color == 'warning'"
-        icon="heroicons-solid:exclamation"
-        :class="iconClass"
-      />
-      <BaseIcon
-        v-else-if="color == 'danger'"
-        icon="heroicons-solid:exclamation-circle"
-        :class="iconClass"
-      />
-      <BaseIcon
-        v-else-if="color == 'success'"
-        icon="heroicons-solid:check-circle"
-        :class="iconClass"
-      />
-      <BaseIcon
-        v-else-if="color == 'info'"
-        icon="heroicons-solid:information-circle"
-        :class="iconClass"
-      />
-    </div>
-
-    <div>
-      <h3
-        v-if="title"
-        class="mb-1 font-medium leading-tight"
-        :class="[titleClass]"
-      >
-        {{ title }}
-      </h3>
-
-      <div v-if="$slots.default" :class="[textClass, 'text-sm leading-tight']">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-export default defineComponent({
-  props: {
-    title: {
-      required: false,
-      default: '',
-      type: String,
-    },
-    color: {
-      default: 'success',
-      type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
-    },
-    showIcon: {
-      default: true,
-      type: Boolean,
-    },
-    bordered: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  computed: {
-    backgroundClass(): string {
-      if (this.color == 'info') {
-        return 'bg-blue-50';
-      }
-      if (this.color == 'success') {
-        return 'bg-green-50';
-      }
-      if (this.color == 'danger') {
-        return 'bg-red-50';
-      }
-      if (this.color == 'warning') {
-        return 'bg-yellow-50';
-      }
-      return 'bg-slate-900';
-    },
-    borderClass(): string {
-      if (!this.bordered) {
-        return '';
-      }
-      if (this.color == 'info') {
-        return 'border border-blue-400';
-      }
-      if (this.color == 'success') {
-        return 'border border-green-400';
-      }
-      if (this.color == 'danger') {
-        return 'border border-red-400';
-      }
-      if (this.color == 'warning') {
-        return 'border border-yellow-400';
-      }
-      return 'borer border-slate-900';
-    },
-    titleClass(): string {
-      if (this.color == 'info') {
-        return 'text-blue-800';
-      }
-      if (this.color == 'success') {
-        return 'text-green-800';
-      }
-      if (this.color == 'warning') {
-        return 'text-yellow-800';
-      }
-      if (this.color == 'danger') {
-        return 'text-red-800';
-      }
-      return 'text-white';
-    },
-    textClass(): string {
-      if (this.color == 'info') {
-        return 'text-blue-700';
-      }
-      if (this.color == 'success') {
-        return 'text-green-700';
-      }
-      if (this.color == 'warning') {
-        return 'text-yellow-700';
-      }
-      if (this.color == 'danger') {
-        return 'text-red-700';
-      }
-      return 'text-white';
-    },
-    iconClass(): string {
-      return this.icon + ' w-5 h-5';
-    },
-    icon(): string {
-      if (this.color == 'info') {
-        return 'text-blue-400';
-      }
-      if (this.color == 'success') {
-        return 'text-green-500';
-      }
-      if (this.color == 'warning') {
-        return 'text-yellow-500';
-      }
-      if (this.color == 'danger') {
-        return 'text-red-500';
-      }
-      return 'text-white';
-    },
-  },
-});
-</script>
+<template>
+  <div
+    class="flex w-full items-start rounded-md p-4"
+    :class="[backgroundClass, borderClass]"
+  >
+    <div v-if="showIcon" class="mr-3">
+      <BaseIcon
+        v-if="color == 'warning'"
+        icon="heroicons-solid:exclamation"
+        :class="iconClass"
+      />
+      <BaseIcon
+        v-else-if="color == 'danger'"
+        icon="heroicons-solid:exclamation-circle"
+        :class="iconClass"
+      />
+      <BaseIcon
+        v-else-if="color == 'success'"
+        icon="heroicons-solid:check-circle"
+        :class="iconClass"
+      />
+      <BaseIcon
+        v-else-if="color == 'info'"
+        icon="heroicons-solid:information-circle"
+        :class="iconClass"
+      />
+    </div>
+
+    <div>
+      <h3
+        v-if="title"
+        class="mb-1 font-medium leading-tight"
+        :class="[titleClass]"
+      >
+        {{ title }}
+      </h3>
+
+      <div v-if="$slots.default" :class="[textClass, 'text-sm leading-tight']">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: {
+      required: false,
+      default: '',
+      type: String,
+    },
+    color: {
+      default: 'success',
+      type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
+    },
+    showIcon: {
+      default: true,
+      type: Boolean,
+    },
+    bordered: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  computed: {
+    backgroundClass(): string {
+      if (this.color == 'info') {
+        return 'bg-blue-50';
+      }
+      if (this.color == 'success') {
+        return 'bg-green-50';
+      }
+      if (this.color == 'danger') {
+        return 'bg-red-50';
+      }
+      if (this.color == 'warning') {
+        return 'bg-yellow-50';
+      }
+      return 'bg-slate-900';
+    },
+    borderClass(): string {
+      if (!this.bordered) {
+        return '';
+      }
+      if (this.color == 'info') {
+        return 'border border-blue-400';
+      }
+      if (this.color == 'success') {
+        return 'border border-green-400';
+      }
+      if (this.color == 'danger') {
+        return 'border border-red-400';
+      }
+      if (this.color == 'warning') {
+        return 'border border-yellow-400';
+      }
+      return 'borer border-slate-900';
+    },
+    titleClass(): string {
+      if (this.color == 'info') {
+        return 'text-blue-800';
+      }
+      if (this.color == 'success') {
+        return 'text-green-800';
+      }
+      if (this.color == 'warning') {
+        return 'text-yellow-800';
+      }
+      if (this.color == 'danger') {
+        return 'text-red-800';
+      }
+      return 'text-white';
+    },
+    textClass(): string {
+      if (this.color == 'info') {
+        return 'text-blue-700';
+      }
+      if (this.color == 'success') {
+        return 'text-green-700';
+      }
+      if (this.color == 'warning') {
+        return 'text-yellow-700';
+      }
+      if (this.color == 'danger') {
+        return 'text-red-700';
+      }
+      return 'text-white';
+    },
+    iconClass(): string {
+      return this.icon + ' w-5 h-5';
+    },
+    icon(): string {
+      if (this.color == 'info') {
+        return 'text-blue-400';
+      }
+      if (this.color == 'success') {
+        return 'text-green-500';
+      }
+      if (this.color == 'warning') {
+        return 'text-yellow-500';
+      }
+      if (this.color == 'danger') {
+        return 'text-red-500';
+      }
+      return 'text-white';
+    },
+  },
+});
+</script>

package/src/components/BaseApp.vue

@@ -1,16 +1,16 @@
-<template>
-  <div class="min-h-full">
-    <slot />
-
-    <!-- Notifications -->
-    <BaseAppNotifications />
-
-    <!-- Dialogs -->
-    <BaseAppDialogs />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import BaseAppDialogs from './BaseAppDialogs.vue';
-import BaseAppNotifications from './BaseAppNotifications.vue';
-</script>
+<template>
+  <div class="min-h-full">
+    <slot />
+
+    <!-- Notifications -->
+    <BaseAppNotifications />
+
+    <!-- Dialogs -->
+    <BaseAppDialogs />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BaseAppDialogs from './BaseAppDialogs.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
+</script>