@omnitend/dashboard-for-laravel 0.4.7

package/resources/js/components/base/DNavbarNav.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BNavbarNav } from "bootstrap-vue-next";
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<template>
+  <BNavbarNav v-bind="$attrs">
+    <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BNavbarNav>
+</template>

package/resources/js/components/base/DNavbarToggle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BNavbarToggle } from "bootstrap-vue-next";
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<template>
+  <BNavbarToggle v-bind="$attrs">
+    <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BNavbarToggle>
+</template>

package/resources/js/components/base/DOffcanvas.vue

@@ -0,0 +1,11 @@
+<template>
+  <BOffcanvas v-bind="$attrs">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BOffcanvas>
+</template>
+
+<script setup lang="ts">
+import { BOffcanvas } from "bootstrap-vue-next";
+</script>

package/resources/js/components/base/DOverlay.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BOverlay component.
+ * Overlay component for indicating loading states or blocking content.
+ */
+<script setup lang="ts">
+import { BOverlay } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BOverlay v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BOverlay>
+</template>

package/resources/js/components/base/DPagination.vue

@@ -0,0 +1,7 @@
+<template>
+  <BPagination v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { BPagination } from "bootstrap-vue-next";
+</script>

package/resources/js/components/base/DPlaceholder.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BPlaceholder component.
+ * Loading placeholder component to indicate content is still loading.
+ */
+<script setup lang="ts">
+import { BPlaceholder } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BPlaceholder v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BPlaceholder>
+</template>

package/resources/js/components/base/DPopover.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BPopover component.
+ * Overlay component for displaying rich content in a popup.
+ */
+<script setup lang="ts">
+import { BPopover } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BPopover v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BPopover>
+</template>

package/resources/js/components/base/DProgress.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BProgress component.
+ * Progress bar for displaying simple or complex progress indicators.
+ */
+<script setup lang="ts">
+import { BProgress } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BProgress v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BProgress>
+</template>

package/resources/js/components/base/DRow.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BRow } from "bootstrap-vue-next";
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<template>
+  <BRow v-bind="$attrs">
+    <template v-for="(_, name) in slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </BRow>
+</template>

package/resources/js/components/base/DSpinner.vue

@@ -0,0 +1,7 @@
+<template>
+  <BSpinner v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { BSpinner } from "bootstrap-vue-next";
+</script>

package/resources/js/components/base/DTab.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BTab } from "bootstrap-vue-next";
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<template>
+  <BTab v-bind="$attrs">
+    <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BTab>
+</template>

package/resources/js/components/base/DTable.vue

@@ -0,0 +1,62 @@
+<template>
+  <BTable
+    ref="bTableRef"
+    v-bind="$attrs"
+    @update:sort-by="handleSortByUpdate"
+    @update:current-page="handleCurrentPageUpdate"
+    @update:busy="handleBusyUpdate"
+    @sorted="handleSorted"
+    @row-clicked="handleRowClicked"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BTable>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BTable } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+// Define emits to forward BTable events
+const emit = defineEmits(['update:sortBy', 'update:currentPage', 'update:busy', 'sorted', 'rowClicked']);
+
+// Reference to BTable for exposing methods
+const bTableRef = ref<any>(null);
+
+// Event handlers to forward BTable events
+const handleSortByUpdate = (val: any) => {
+  emit('update:sortBy', val);
+};
+
+const handleCurrentPageUpdate = (val: any) => {
+  emit('update:currentPage', val);
+};
+
+const handleBusyUpdate = (val: any) => {
+  emit('update:busy', val);
+};
+
+const handleSorted = (val: any) => {
+  emit('sorted', val);
+};
+
+const handleRowClicked = (item: any, index: number, event: MouseEvent) => {
+  emit('rowClicked', item, index, event);
+};
+
+// Expose refresh method from BTable
+const refresh = () => {
+  if (bTableRef.value && typeof bTableRef.value.refresh === 'function') {
+    bTableRef.value.refresh();
+  }
+};
+
+defineExpose({
+  refresh,
+});
+</script>

package/resources/js/components/base/DTabs.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BTabs component.
+ * Create tabbed panes of local content with customisable navigation.
+ */
+<script setup lang="ts">
+import { BTabs } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BTabs v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BTabs>
+</template>

package/resources/js/components/base/DToast.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { BToast } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BToast v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BToast>
+</template>

package/resources/js/components/base/DToaster.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { BToastOrchestrator } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BToastOrchestrator v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BToastOrchestrator>
+</template>

package/resources/js/components/base/DTooltip.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BTooltip component.
+ * Display helpful tooltips when hovering over elements.
+ */
+<script setup lang="ts">
+import { BTooltip } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BTooltip v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BTooltip>
+</template>

package/resources/js/components/extended/DXBasicForm.vue

@@ -0,0 +1,177 @@
+<template>
+    <BForm @submit.prevent="handleSubmit">
+        <!-- Form-level error message -->
+        <DAlert
+            v-if="form.shouldShowMessage"
+            :model-value="form.shouldShowMessage"
+            variant="danger"
+            class="mb-3"
+        >
+            {{ form.message }}
+        </DAlert>
+
+        <!-- Render each field -->
+        <template v-for="field in fields" :key="field.key">
+            <!-- Custom slot for this field -->
+            <slot :name="`field-${field.key}`" :field="field" :form="form">
+                <!-- Default field rendering -->
+                <DFormGroup
+                    :label="field.label"
+                    :label-for="field.key"
+                    :class="field.class || 'mb-3'"
+                >
+                    <!-- Text-based inputs -->
+                    <DFormInput
+                        v-if="isTextInput(field.type)"
+                        :id="field.key"
+                        v-model="form.data[field.key]"
+                        :type="field.type"
+                        :required="field.required"
+                        :placeholder="field.placeholder"
+                        :state="form.getState(field.key)"
+                        v-bind="field.inputProps"
+                        @input="form.clearError(field.key)"
+                    />
+
+                    <!-- Textarea -->
+                    <DFormTextarea
+                        v-else-if="field.type === 'textarea'"
+                        :id="field.key"
+                        v-model="form.data[field.key]"
+                        :required="field.required"
+                        :placeholder="field.placeholder"
+                        :rows="field.rows || 3"
+                        :state="form.getState(field.key)"
+                        v-bind="field.inputProps"
+                        @input="form.clearError(field.key)"
+                    />
+
+                    <!-- Select -->
+                    <DFormSelect
+                        v-else-if="field.type === 'select'"
+                        :id="field.key"
+                        v-model="form.data[field.key]"
+                        :required="field.required"
+                        :options="field.options"
+                        :state="form.getState(field.key)"
+                        v-bind="field.inputProps"
+                        @change="form.clearError(field.key)"
+                    />
+
+                    <!-- Checkbox -->
+                    <DFormCheckbox
+                        v-else-if="field.type === 'checkbox'"
+                        :id="field.key"
+                        v-model="form.data[field.key]"
+                        v-bind="field.inputProps"
+                    >
+                        {{ field.label }}
+                    </DFormCheckbox>
+
+                    <!-- Radio group -->
+                    <BFormRadioGroup
+                        v-else-if="field.type === 'radio'"
+                        :id="field.key"
+                        v-model="form.data[field.key]"
+                        :options="field.options"
+                        :required="field.required"
+                        :state="form.getState(field.key)"
+                        v-bind="field.inputProps"
+                        @change="form.clearError(field.key)"
+                    />
+
+                    <!-- Validation error -->
+                    <DFormInvalidFeedback v-if="form.hasError(field.key)">
+                        {{ form.getError(field.key) }}
+                    </DFormInvalidFeedback>
+
+                    <!-- Help text -->
+                    <DFormText v-if="field.help">
+                        {{ field.help }}
+                    </DFormText>
+                </DFormGroup>
+            </slot>
+        </template>
+
+        <!-- Submit button -->
+        <DButton
+            v-if="showSubmit"
+            type="submit"
+            variant="primary"
+            :disabled="form.processing"
+            class="w-100"
+        >
+            <span v-if="form.processing">{{ submitLoadingText }}</span>
+            <span v-else>{{ submitText }}</span>
+        </DButton>
+
+        <!-- Footer slot -->
+        <slot name="footer"></slot>
+    </BForm>
+</template>
+
+<script setup lang="ts">
+import { BForm, BFormRadioGroup } from "bootstrap-vue-next";
+import DAlert from "../base/DAlert.vue";
+import DFormGroup from "../base/DFormGroup.vue";
+import DFormInput from "../base/DFormInput.vue";
+import DFormTextarea from "../base/DFormTextarea.vue";
+import DFormSelect from "../base/DFormSelect.vue";
+import DFormCheckbox from "../base/DFormCheckbox.vue";
+import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
+import DFormText from "../base/DFormText.vue";
+import DButton from "../base/DButton.vue";
+import type { UseFormReturn } from "../../composables/useForm";
+import type { FieldDefinition, FieldType } from "../../types";
+
+interface Props {
+    /** Form instance from useForm composable */
+    form: UseFormReturn<any>;
+
+    /** Field definitions */
+    fields: FieldDefinition[];
+
+    /** Submit button text */
+    submitText?: string;
+
+    /** Submit button loading text */
+    submitLoadingText?: string;
+
+    /** Show submit button */
+    showSubmit?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    submitText: "Submit",
+    submitLoadingText: "Submitting...",
+    showSubmit: true,
+});
+
+const emit = defineEmits<{
+    submit: [];
+}>();
+
+/**
+ * Check if field type is a text-based input
+ */
+const isTextInput = (type: FieldType): boolean => {
+    return [
+        "text",
+        "email",
+        "password",
+        "number",
+        "url",
+        "tel",
+        "date",
+        "datetime-local",
+        "time",
+    ].includes(type);
+};
+
+/**
+ * Handle form submission
+ */
+const handleSubmit = () => {
+    emit("submit");
+};
+</script>