nuxt-glorious 1.2.1-3 → 1.2.1-5

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "glorious",
   "configKey": "glorious",
-  "version": "1.2.1-3"
+  "version": "1.2.1-5"
 }

package/dist/runtime/assets/style/components/alert.css

@@ -0,0 +1,18 @@
+.glorious-alert {
+  @apply p-3 rounded shadow;
+}
+.glorious-alert.color-orange {
+  @apply border border-orange-300 bg-orange-100;
+}
+.glorious-alert.color-blue {
+  @apply border border-blue-300 bg-blue-100;
+}
+.glorious-alert.color-gray {
+  @apply border border-gray-300 bg-gray-100;
+}
+.glorious-alert.color-red {
+  @apply border border-red-300 bg-red-100;
+}
+.glorious-alert.color-green {
+  @apply border border-green-300 bg-green-100;
+}

package/dist/runtime/assets/style/components/breadcrumb.css

@@ -0,0 +1,6 @@
+.glorious-breadcrumb {
+  @apply text-xs;
+}
+.glorious-breadcrumb .end-text {
+  @apply font-bold;
+}

package/dist/runtime/components/G/Alert.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+const props = defineProps({
+  color: {
+    required: false,
+    default: "blue",
+    type: String as () => "orange" | "blue" | "gray" | "red" | "green",
+  },
+});
+</script>
+
+<template>
+  <div class="glorious-alert" :class="[`color-${props.color}`]">
+    <slot />
+  </div>
+</template>
+
+<style>
+.glorious-alert {
+  @apply p-3 rounded shadow;
+}
+.glorious-alert.color-orange {
+  @apply border border-orange-300 bg-orange-100;
+}
+.glorious-alert.color-blue {
+  @apply border border-blue-300 bg-blue-100;
+}
+.glorious-alert.color-gray {
+  @apply border border-gray-300 bg-gray-100;
+}
+.glorious-alert.color-red {
+  @apply border border-red-300 bg-red-100;
+}
+.glorious-alert.color-green {
+  @apply border border-green-300 bg-green-100;
+}
+</style>

package/dist/runtime/components/G/BottomNavigation.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>n</div>
+</template>

package/dist/runtime/components/G/Breadcrumb.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+interface breadcrumbInterface {
+  text: String;
+  icon?: String;
+  to?: String;
+}
+
+const props = defineProps({
+  items: {
+    required: true,
+    type: Array<breadcrumbInterface>,
+  },
+  divider: {
+    required: false,
+    type: String,
+    default: "/",
+  },
+});
+</script>
+
+<template>
+  <div class="glorious-breadcrumb flex gap-1 flex-wrap">
+    <div
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="flex items-center gap-1 flex-wrap"
+    >
+      <GIcon v-if="item.icon" :name="item.icon" />
+      <nuxt-link
+        v-if="item.to"
+        class="glorious-breadcrumb-link"
+        :to="item.to.toString()"
+      >
+        {{ item.text }}
+      </nuxt-link>
+      <span
+        v-else
+        class="glorious-breadcrumb-text"
+        :class="[index + 1 === props.items.length ? 'end-text' : '']"
+      >
+        {{ item.text }}
+      </span>
+      <span v-if="index + 1 !== props.items.length">{{ props.divider }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.glorious-breadcrumb {
+  @apply text-xs;
+}
+.glorious-breadcrumb .end-text {
+  @apply font-bold;
+}
+</style>

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1-3",
+  "version": "1.2.1-5",
   "name": "nuxt-glorious",
   "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
   "repository": "sajadhzj/nuxt-glorious",

package/dist/runtime/components/G/Breadcrump.vue

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps({
-  items: {
-    required: true,
-    type: Object,
-  },
-  dir: {
-    required: false,
-    type: String as () => "rtl" | "ltr",
-    default: "rtl",
-  },
-});
-</script>
-
-<template>
-  <div class="flex gap-1 flex-wrap dir-ltr" :dir="props.dir">
-    <div
-      v-for="(item, key, index) in props.items"
-      :key="index"
-      class="flex items-center gap-1 flex-wrap"
-    >
-      <nuxt-link
-        v-if="index !== Object.entries(props.items).length - 1"
-        :to="key"
-        class="text-gray-500 hover:text-gray-800"
-      >
-        {{ item }}
-      </nuxt-link>
-
-      <span
-        v-if="index === Object.entries(props.items).length - 1"
-        class="text-gray-600 font-medium"
-      >
-        {{ item }}
-      </span>
-
-      <GIcon
-        v-if="index !== Object.entries(props.items).length - 1"
-        name="glorious-arrow"
-        :style="{ rotate: props.dir === 'rtl' ? '180deg' : '0deg' }"
-        :size="10"
-        color="#6b7280"
-      />
-    </div>
-  </div>
-</template>