sprintify-ui 0.2.18 → 0.2.21

package/src/components/BaseSystemAlert.vue

@@ -1,89 +1,89 @@
-<template>
-  <div class="relative">
-    <component
-      :is="is"
-      :type="is == 'button' ? 'button' : undefined"
-      :to="is == 'RouterLink' ? to : undefined"
-      class="relative flex w-full items-center justify-center bg-white text-center font-medium"
-      :class="[colorClasses]"
-      @click="is == 'button' && action ? action() : undefined"
-    >
-      <div
-        class="py-4 text-sm leading-tight"
-        :class="[closable ? 'pr-10 pl-3' : 'px-3']"
-      >
-        <div class="max-w-4xl">
-          <slot />
-        </div>
-      </div>
-    </component>
-    <div
-      v-if="closable"
-      class="absolute top-0 right-0 p-3"
-    >
-      <button
-        type="button"
-        class="rounded-full bg-black bg-opacity-50 p-1 text-white"
-        @click="close"
-      >
-        <BaseIcon icon="heroicons:x-mark" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-
-const props = defineProps({
-  to: {
-    default: undefined,
-    type: [Object, String] as PropType<RouteLocationRaw | undefined>,
-  },
-  action: {
-    default: undefined,
-    type: Function as PropType<() => Promise<void> | void>,
-  },
-  color: {
-    default: 'info',
-    type: String as PropType<'info' | 'warning' | 'danger' | 'success'>,
-  },
-  closable: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['close']);
-
-function close() {
-  emit('close');
-}
-
-const is = computed((): string => {
-  if (props.to) {
-    return 'RouterLink';
-  }
-  if (props.action) {
-    return 'button';
-  }
-  return 'div';
-});
-
-const colorClasses = computed((): string => {
-  if (props.color == 'info') {
-    return 'bg-blue-500 text-white';
-  }
-  if (props.color == 'success') {
-    return 'bg-green-600 text-white';
-  }
-  if (props.color == 'danger') {
-    return 'bg-red-600 text-white';
-  }
-  if (props.color == 'warning') {
-    return 'bg-yellow-400 text-yellow-900';
-  }
-  return 'bg-slate-900 text-white';
-});
-</script>
+<template>
+  <div class="relative">
+    <component
+      :is="is"
+      :type="is == 'button' ? 'button' : undefined"
+      :to="is == 'RouterLink' ? to : undefined"
+      class="relative flex w-full items-center justify-center text-center font-medium"
+      :class="[colorClasses]"
+      @click="is == 'button' && action ? action() : undefined"
+    >
+      <div
+        class="py-4 text-sm leading-tight"
+        :class="[closable ? 'pr-10 pl-3' : 'px-3']"
+      >
+        <div class="max-w-4xl">
+          <slot />
+        </div>
+      </div>
+    </component>
+    <div
+      v-if="closable"
+      class="absolute top-0 right-0 p-3"
+    >
+      <button
+        type="button"
+        class="rounded-full bg-black bg-opacity-50 p-1 text-white"
+        @click="close"
+      >
+        <BaseIcon icon="heroicons:x-mark" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+
+const props = defineProps({
+  to: {
+    default: undefined,
+    type: [Object, String] as PropType<RouteLocationRaw | undefined>,
+  },
+  action: {
+    default: undefined,
+    type: Function as PropType<() => Promise<void> | void>,
+  },
+  color: {
+    default: 'info',
+    type: String as PropType<'info' | 'warning' | 'danger' | 'success'>,
+  },
+  closable: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+function close() {
+  emit('close');
+}
+
+const is = computed((): string => {
+  if (props.to) {
+    return 'RouterLink';
+  }
+  if (props.action) {
+    return 'button';
+  }
+  return 'div';
+});
+
+const colorClasses = computed((): string => {
+  if (props.color == 'info') {
+    return 'bg-blue-500 text-white';
+  }
+  if (props.color == 'success') {
+    return 'bg-green-600 text-white';
+  }
+  if (props.color == 'danger') {
+    return 'bg-red-600 text-white';
+  }
+  if (props.color == 'warning') {
+    return 'bg-yellow-400 text-yellow-900';
+  }
+  return 'bg-slate-900 text-white';
+});
+</script>

package/src/components/BaseTabItem.vue

@@ -1,96 +1,96 @@
-<template>
-  <li>
-    <RouterLink
-      v-slot="{ href, navigate, isActive, isExactActive }"
-      :to="to"
-      custom
-    >
-      <a
-        :href="disabled ? undefined : href"
-        :disabled="disabled"
-        class="group inline-block rounded-t-lg"
-        :class="[
-          isActiveInternal(isActive, isExactActive)
-            ? 'active text-primary-600'
-            : 'text-slate-600 hover:text-slate-900',
-          disabled ? 'cursor-not-allowed opacity-60' : '',
-          sizeClassOuter,
-        ]"
-        @click.prevent="onClick(navigate)"
-      >
-        <div
-          class="relative flex"
-          :class="sizeClassInner"
-        >
-          <div
-            class="absolute left-0 bottom-0 w-full"
-            :class="[
-              isActiveInternal(isActive, isExactActive)
-                ? 'h-[2px] bg-primary-600'
-                : 'group-hover:h-px group-hover:bg-slate-700',
-            ]"
-          />
-          <div class="whitespace-nowrap">
-            <slot :active="isActiveInternal(isActive, isExactActive)" />
-          </div>
-        </div>
-      </a>
-    </RouterLink>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import { NavigationFailure, RouteLocationRaw } from 'vue-router';
-
-const props = withDefaults(
-  defineProps<{
-    to: RouteLocationRaw;
-    disabled?: boolean;
-    activeStrategy?: 'default' | 'exact';
-  }>(),
-  {
-    disabled: false,
-    activeStrategy: 'default',
-  }
-);
-
-const size = inject('tabs:size', ref<'xs' | 'sm' | 'md' | 'lg'>('md'));
-
-function onClick(navigate: () => Promise<void | NavigationFailure>) {
-  if (props.disabled) {
-    return;
-  }
-
-  return navigate();
-}
-
-function isActiveInternal(isActive: boolean, isExactActive: boolean) {
-  return props.activeStrategy == 'default' ? isActive : isExactActive;
-}
-
-const sizeClassOuter = computed(() => {
-  switch (size.value) {
-    case 'xs':
-      return 'px-1';
-    case 'sm':
-      return 'px-2';
-    case 'md':
-      return 'px-2.5';
-    case 'lg':
-      return 'px-3';
-  }
-});
-
-const sizeClassInner = computed(() => {
-  switch (size.value) {
-    case 'xs':
-      return 'text-xs py-2 px-1 font-normal';
-    case 'sm':
-      return 'text-sm py-2.5 px-1 font-normal';
-    case 'md':
-      return 'text-sm py-4 px-1 font-normal';
-    case 'lg':
-      return 'text-base py-4 px-1 font-normal';
-  }
-});
-</script>
+<template>
+  <li>
+    <RouterLink
+      v-slot="{ href, navigate, isActive, isExactActive }"
+      :to="to"
+      custom
+    >
+      <a
+        :href="disabled ? undefined : href"
+        :disabled="disabled"
+        class="group inline-block rounded-t-lg"
+        :class="[
+          isActiveInternal(isActive, isExactActive)
+            ? 'active text-primary-600'
+            : 'text-slate-600 hover:text-slate-900',
+          disabled ? 'cursor-not-allowed opacity-60' : '',
+          sizeClassOuter,
+        ]"
+        @click.prevent="onClick(navigate)"
+      >
+        <div
+          class="relative flex"
+          :class="sizeClassInner"
+        >
+          <div
+            class="absolute left-0 bottom-0 w-full"
+            :class="[
+              isActiveInternal(isActive, isExactActive)
+                ? 'h-[2px] bg-primary-600'
+                : 'group-hover:h-px group-hover:bg-slate-700',
+            ]"
+          />
+          <div class="whitespace-nowrap">
+            <slot :active="isActiveInternal(isActive, isExactActive)" />
+          </div>
+        </div>
+      </a>
+    </RouterLink>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { NavigationFailure, RouteLocationRaw } from 'vue-router';
+
+const props = withDefaults(
+  defineProps<{
+    to: RouteLocationRaw;
+    disabled?: boolean;
+    activeStrategy?: 'default' | 'exact';
+  }>(),
+  {
+    disabled: false,
+    activeStrategy: 'default',
+  }
+);
+
+const size = inject('tabs:size', ref<'xs' | 'sm' | 'md' | 'lg'>('md'));
+
+function onClick(navigate: () => Promise<void | NavigationFailure>) {
+  if (props.disabled) {
+    return;
+  }
+
+  return navigate();
+}
+
+function isActiveInternal(isActive: boolean, isExactActive: boolean) {
+  return props.activeStrategy == 'default' ? isActive : isExactActive;
+}
+
+const sizeClassOuter = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'px-1';
+    case 'sm':
+      return 'px-2';
+    case 'md':
+      return 'px-2.5';
+    case 'lg':
+      return 'px-3';
+  }
+});
+
+const sizeClassInner = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'text-xs py-2 px-1 font-normal';
+    case 'sm':
+      return 'text-sm py-2.5 px-1 font-normal';
+    case 'md':
+      return 'text-sm py-4 px-1 font-normal';
+    case 'lg':
+      return 'text-base py-4 px-1 font-normal';
+  }
+});
+</script>