sprintify-ui 0.0.0

package/src/components/BaseSwitch.vue

@@ -0,0 +1,87 @@
+<template>
+  <SwitchGroup>
+    <div class="inline-flex items-center space-x-3">
+      <Switch
+        :model-value="modelValue"
+        :class="[
+          modelValue ? bg : 'bg-slate-200',
+          'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ',
+          focus,
+        ]"
+        @update:model-value="update"
+      >
+        <span
+          aria-hidden="true"
+          :class="[
+            modelValue ? 'translate-x-5' : 'translate-x-0',
+            'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+          ]"
+        />
+      </Switch>
+      <SwitchLabel v-if="$slots.default" class="cursor-pointer">
+        <slot />
+      </SwitchLabel>
+    </div>
+  </SwitchGroup>
+</template>
+
+<script lang="ts">
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Switch,
+    SwitchGroup,
+    SwitchLabel,
+  },
+  props: {
+    modelValue: {
+      default: false,
+      type: Boolean,
+    },
+    color: {
+      default: 'primary',
+      type: String,
+    },
+    size: {
+      default: 'base',
+      type: String,
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    bg() {
+      if (this.color == 'primary') {
+        return 'bg-primary-500';
+      }
+      if (this.color == 'red') {
+        return 'bg-red-500';
+      }
+      if (this.color == 'green') {
+        return 'bg-green-500';
+      }
+      return 'bg-slate-900';
+    },
+    focus() {
+      if (this.color == 'primary') {
+        return 'focus:ring-primary-500';
+      }
+      if (this.color == 'red') {
+        return 'focus:ring-red-500';
+      }
+      if (this.color == 'green') {
+        return 'focus:ring-green-500';
+      }
+      return 'focus:ring-slate-900';
+    },
+  },
+  methods: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    update(payload: any) {
+      this.$emit('update:modelValue', payload);
+    },
+  },
+});
+</script>

package/src/components/BaseSystemAlert.vue

@@ -0,0 +1,86 @@
+<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"
+      >
+        <Icon 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, undefined] 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

@@ -0,0 +1,30 @@
+<template>
+  <li role="presentation">
+    <router-link v-slot="{ href, navigate, isExactActive }" :to="to" custom>
+      <a
+        :href="href"
+        class="relative inline-block whitespace-nowrap rounded-t-lg border-b-[2px] p-4 font-medium"
+        :class="[
+          isExactActive
+            ? 'border-blue-600 text-blue-600'
+            : 'border-transparent hover:border-slate-300 hover:text-slate-600',
+        ]"
+        @click="navigate"
+      >
+        <slot />
+      </a>
+    </router-link>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+
+defineProps({
+  to: {
+    required: true,
+    type: [Object, String] as PropType<RouteLocationRaw>,
+  },
+});
+</script>