@gameap/ui 1.0.0

package/components/GBreadcrumbs.vue

@@ -0,0 +1,49 @@
+<template>
+  <!-- Breadcrumb -->
+  <nav class="flex pt-3 pb-3 py-4 px-4 mb-4 text-stone-700 border border-stone-200 rounded-lg bg-stone-100 dark:bg-stone-800 dark:border-stone-700" aria-label="Breadcrumb">
+    <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+      <li v-for="item in items.slice(0, 1)" class="inline-flex items-center">
+        <a v-if="item.link" :href="item.link" class="inline-flex items-center text-sm font-medium text-stone-700 hover:text-blue-600 dark:text-stone-400 dark:hover:text-white">
+          <i v-if="item.icon" :class="item.icon" class="align-middle mr-0.5"></i>
+          <span class="align-middle">{{ item.text }}</span>
+        </a>
+        <router-link v-else-if="item.route" :to="item.route" class="ms-1 text-sm font-medium text-stone-700 hover:text-blue-600 md:ms-2 dark:text-stone-400 dark:hover:text-white">
+          <i v-if="item.icon" :class="item.icon" class="align-middle mr-0.5"></i>
+          <span class="align-middle">{{ item.text }}</span>
+        </router-link>
+        <span v-else class="ms-1 text-sm font-medium text-stone-500 md:ms-2 dark:text-stone-400">{{ item.text }}</span>
+      </li>
+
+      <li v-for="item in items.slice(1)">
+        <div class="flex items-center">
+          <i class="fa-solid fa-chevron-right align-middle w-3 h-3 mx-2 text-stone-400"></i>
+          <a v-if="item.link" :href="item.link" class="ms-1 text-sm font-medium text-stone-700 hover:text-blue-600 md:ms-2 dark:text-stone-400 dark:hover:text-white">
+            <i v-if="item.icon !== ''" :class="item.icon" class="align-middle mr-0.5"></i>
+            <span class="align-middle">{{ item.text }}</span>
+          </a>
+          <router-link v-else-if="item.route" :to="item.route" class="ms-1 text-sm font-medium text-stone-700 hover:text-blue-600 md:ms-2 dark:text-stone-400 dark:hover:text-white">
+            <i v-if="item.icon !== ''" :class="item.icon" class="align-middle mr-0.5"></i>
+            <span class="align-middle">{{ item.text }}</span>
+          </router-link>
+          <span v-else-if="item.render" class="ms-1 text-sm font-medium text-stone-500 md:ms-2 dark:text-stone-400">
+            <render :render="item.render" />
+          </span>
+          <span v-else class="ms-1 text-sm font-medium text-stone-500 md:ms-2 dark:text-stone-400">
+            {{ item.text }}
+          </span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: null,
+});
+
+const render = (attr) => {
+  return attr.render()
+}
+
+</script>

package/components/GDeletableList.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="$attrs.class">
+    <div v-for="item in items" class="flex mb-1 md:w-full">
+      <div
+          class="text-xs text-center h-full md:w-full inline-flex px-2 py-1 bg-stone-500 hover:bg-stone-600 text-white rounded-s cursor-pointer"
+          @click="onClick(item.gameCode, item.id)"
+      >
+        {{ item.name }}
+      </div>
+      <div
+          class="ml-[2px] text-xs h-full inline-flex items-center px-2 py-1 bg-red-500 hover:bg-red-600 text-white rounded-e cursor-pointer"
+          @click="onClickDelete(item.id)"
+      >
+        <i class="fa-solid fa-trash"></i>&nbsp;
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+const props = defineProps({
+  items: [],
+  clickCallback: Function,
+  deleteCallback: Function,
+});
+
+const onClickDelete = (id) => {
+  props.deleteCallback(id)
+}
+
+const onClick = (code, id) => {
+  props.clickCallback(code, id)
+}
+
+</script>

package/components/GStatusBadge.vue

@@ -0,0 +1,33 @@
+<template>
+  <span :class="spanClass">{{ statusText }}</span>
+</template>
+
+<script setup>
+import {computed, defineProps} from "vue"
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+  },
+})
+
+const badgeClasses = {
+  waiting: 'badge-light',
+  working: 'badge-blue',
+  error: 'badge-red',
+  success: 'badge-green',
+  canceled: 'badge-stone',
+}
+
+const spanClass = computed(() => {
+  return badgeClasses[props.status] ?? 'badge-light'
+})
+
+const statusText = computed(() => {
+  return props.text ? props.text : props.status
+})
+</script>

package/components/Loading.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex justify-center">
+    <TransitionRoot
+        :show="showTransition"
+        enter="transition-opacity duration-[2000ms]"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity duration-150"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+    >
+      <div class="fa-3x">
+        <i class="fa-solid fa-gear fa-spin"></i>
+      </div>
+    </TransitionRoot>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue"
+import { TransitionRoot } from '@headlessui/vue'
+
+const showTransition = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    showTransition.value = true
+  }, 10)
+})
+
+
+</script>

package/components/Progressbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="progress">
+    <div
+      class="progress-bar progress-bar-info"
+      role="progressbar"
+      :aria-valuenow="progress"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="{ width: progress + '%'}"
+    >
+      {{ progress }}%
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  progress: {
+    type: Number,
+    default: 0
+  }
+})
+</script>

package/index.js

@@ -0,0 +1,15 @@
+export { default as GBreadcrumbs } from './components/GBreadcrumbs.vue'
+export { default as GDeletableList } from './components/GDeletableList.vue'
+export { default as GStatusBadge } from './components/GStatusBadge.vue'
+export { default as Loading } from './components/Loading.vue'
+export { default as Progressbar } from './components/Progressbar.vue'
+
+export function install(app) {
+  app.component('GBreadcrumbs', GBreadcrumbs)
+  app.component('GDeletableList', GDeletableList)
+  app.component('GStatusBadge', GStatusBadge)
+  app.component('Loading', Loading)
+  app.component('Progressbar', Progressbar)
+}
+
+export default { install }

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@gameap/ui",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js"
+    },
+    "./style.css": "./style.css"
+  },
+  "files": [
+    "index.js",
+    "style.css",
+    "components"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.0.0",
+    "@headlessui/vue": "^1.7.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    },
+    "@headlessui/vue": {
+      "optional": true
+    }
+  }
+}

package/style.css

@@ -0,0 +1,35 @@
+.badge-red {
+    @apply bg-red-500 text-white text-xs font-medium me-2 px-1.5 py-0.5 rounded dark:bg-red-900;
+}
+
+.badge-green {
+    @apply bg-lime-500 text-white text-xs font-medium me-2 px-1.5 py-0.5 rounded dark:bg-lime-900;
+}
+
+.badge-orange {
+    @apply bg-orange-500 text-white text-xs font-medium me-2 px-1.5 py-0.5 rounded dark:bg-orange-900;
+}
+
+.badge-blue {
+    @apply bg-sky-500 text-white text-xs font-medium me-2 px-1.5 py-0.5 rounded dark:bg-sky-900;
+}
+
+.badge-stone {
+    @apply bg-stone-500 text-white text-xs font-medium me-2 px-1.5 py-0.5 rounded dark:bg-stone-900;
+}
+
+.badge-light {
+    @apply bg-stone-50 text-stone-600 me-2 px-1.5 py-0.5 rounded ring-1 ring-inset ring-stone-500/10;
+}
+
+.progress {
+    @apply w-full bg-stone-200 rounded-full h-4 dark:bg-stone-700;
+}
+
+.progress-bar {
+    @apply h-4 rounded-full text-xs text-center text-white;
+}
+
+.progress-bar-info {
+    @apply bg-blue-500;
+}