@finema/finework-layer 0.0.11 → 0.0.13

package/app/components/Button/ActionIcon.vue

@@ -1,29 +1,29 @@
-<template>
-  <Button
-    size="lg"
-    variant="ghost"
-    :icon="icon"
-    :color="color"
-    square
-    :disabled="disabled"
-    :loading="loading"
-    :to="to"
-    @click="$emit('click')"
-  />
-</template>
-
-<script lang="ts" setup>
-defineEmits<{
-  (e: 'click'): void
-}>()
-
-withDefaults(defineProps<{
-  to?: string
-  icon: string
-  color?: 'neutral' | 'error' | 'primary' | 'success' | 'warning' | 'info'
-  disabled?: boolean
-  loading?: boolean
-}>(), {
-  color: 'neutral',
-})
-</script>
+<template>
+  <Button
+    size="lg"
+    variant="ghost"
+    :icon="icon"
+    :color="color"
+    square
+    :disabled="disabled"
+    :loading="loading"
+    :to="to"
+    @click="$emit('click')"
+  />
+</template>
+
+<script lang="ts" setup>
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+withDefaults(defineProps<{
+  to?: string
+  icon: string
+  color?: 'neutral' | 'error' | 'primary' | 'success' | 'warning' | 'info'
+  disabled?: boolean
+  loading?: boolean
+}>(), {
+  color: 'neutral',
+})
+</script>

package/app/components/Button/Back.vue

@@ -1,22 +1,22 @@
-<template>
-  <Button
-    icon="icon-park-outline:left"
-    variant="outline"
-    color="neutral"
-    :to="to"
-    @click="$emit('click')"
-  >
-   {{ label || 'กลับ' }} 
-  </Button>
-</template>
-
-<script lang="ts" setup>
-defineEmits<{
-  (e: 'click'): void
-}>()
-
-defineProps<{
-  to?: string
-  label?: string
-}>()
-</script>
+<template>
+  <Button
+    icon="icon-park-outline:left"
+    variant="outline"
+    color="neutral"
+    :to="to"
+    @click="$emit('click')"
+  >
+    {{ label || 'กลับ' }}
+  </Button>
+</template>
+
+<script lang="ts" setup>
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+defineProps<{
+  to?: string
+  label?: string
+}>()
+</script>

package/app/components/InfoItemList.vue

@@ -1,198 +1,202 @@
-<template>
-  <div
-    :class="[
-      'grid w-full gap-4',
-      {
-        'lg:grid-cols-2': !vertical,
-      },
-      customClass, 
-    ]"
-  >
-    <div
-      v-for="item in items"
-      :key="item.label"
-      :class="[
-        'lg:flex',
-        {
-          'flex-col': !inline,
-          'flex-row': inline,
-        },
-        item.customClass,
-
-      ]"
-    >
-      <p
-        v-if="item.type !== TYPE_INFO_ITEM.BOOLEAN"
-        :class="[
-          'mb-1',
-          {
-            'mb-2 block text-sm font-bold text-black': !inline,
-            'mr-2 font-bold': inline,
-          },
-        ]"
-      >
-        {{ item.label }}
-      </p>
-      <component
-        :is="item.component"
-        v-if="item.component"
-        v-bind="item.props"
-      />
-      <slot
-        v-else-if="item.key && $slots[`${item.key}-item`]"
-        :name="`${item.key}-item`"
-        :row="item"
-        :item="item"
-        :value="item.value"
-        :label="item.label"
-      />
-      <div
-        v-else
-        class="whitespace-pre-line text-gray-900"
-      >
-        <span
-          v-if="shouldTruncateText(item)"
-          v-show="!expandedItems[item.label]"
-        >
-          {{ truncateText(item.value || '-', item.max || 0) }}
-          <button
-            class="
-              text-info-600 ml-1 cursor-pointer text-sm
-              hover:text-info-800
-            "
-            @click="toggleExpanded(item.label)"
-          >
-            เพิ่มเติม
-          </button>
-        </span>
-        <span
-          v-if="shouldTruncateText(item)"
-          v-show="expandedItems[item.label]"
-        >
-          {{ item.value || '-' }}
-          <button
-            class="
-              text-info-600 ml-1 cursor-pointer text-sm
-              hover:text-info-800
-            "
-            @click="toggleExpanded(item.label)"
-          >
-            แสดงน้อยลง
-          </button>
-        </span>
-        <!-- <span >
-          <Icon
-            class="size-5"
-            :class="item.value ? 'text-success' : 'text-error'"
-            :name="item.value
-              ? 'material-symbols:check-circle-outline-rounded'
-              : 'material-symbols:cancel-outline-rounded'"
-          />
-        </span> -->
-        <Checkbox
-          v-if="item.type === TYPE_INFO_ITEM.BOOLEAN"
-          v-model="item.value"
-          :label="item.label"
-          class="pointer-events-none"
-        />
-        <span v-else-if="!shouldTruncateText(item)">
-          {{ getValue(item) }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue'
-enum TYPE_INFO_ITEM {
-  TEXT = 'text',
-  NUMBER = 'number',
-  CURRENCY = 'currency',
-  DATE = 'date',
-  DATE_TIME = 'date_time',
-  BOOLEAN = 'boolean',
-}
-
-defineProps<{
-  items: Array<{
-    label: string
-    value?: any
-    component?: any
-    props?: Record<string, any>
-    max?: number
-    key?: string
-    type?: TYPE_INFO_ITEM
-    customClass?: string
-  }>
-  vertical?: boolean
-  inline?: boolean
-  customClass?: string
-
-}>()
-
-const expandedItems = reactive<Record<string, boolean>>({})
-
-const shouldTruncateText = (item: any): boolean => {
-  return item.max && item.value && item.value.length > item.max
-}
-
-const truncateText = (text: string, maxLength: number): string => {
-  if (!maxLength || text.length <= maxLength) return text
-
-  return text.slice(0, maxLength) + '...'
-}
-
-const toggleExpanded = (label: string): void => {
-  expandedItems[label] = !expandedItems[label]
-}
-
-const getValue = (item: any): string => {
-  if (item.type === TYPE_INFO_ITEM.DATE) {
-    return item.value
-      ? new Date(item.value).toLocaleDateString('en', {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      })
-      : '-'
-  }
-
-  if (item.type === TYPE_INFO_ITEM.DATE_TIME) {
-    return item.value
-      ? new Date(item.value).toLocaleString('en', {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-        hour12: false,
-        timeZone: 'UTC',
-      })
-      : '-'
-  }
-
-  if (item.value === undefined || item.value === null) {
-    return '-'
-  }
-
-  if (typeof item.value === 'number') {
-    if (item.type === 'currency') {
-      return NumberHelper.toCurrency(item.value)
-    }
-
-    return NumberHelper.withFixed(item.value)
-  }
-
-  if (item.type === 'currency') {
-    return NumberHelper.toCurrency(item.value)
-  }
-
-  if (item.type === 'number') {
-    return NumberHelper.withFixed(item.value)
-  }
-
-  return item.value || '-'
-}
-</script>
+<template>
+  <div
+    :class="[
+      'grid w-full gap-4',
+      {
+        'lg:grid-cols-2': !vertical,
+      },
+      customClass,
+    ]"
+  >
+    <div
+      v-for="item in items"
+      :key="item.label"
+      :class="[
+        'lg:flex',
+        {
+          'flex-col': !inline,
+          'flex-row': inline,
+        },
+        item.customClass,
+
+      ]"
+    >
+      <template v-if="!item.hide">
+        <p
+          v-if="item.type !== TYPE_INFO_ITEM.BOOLEAN"
+          :class="[
+            'mb-1',
+            {
+              'mb-2 block text-sm font-bold text-black': !inline,
+              'mr-2 font-bold': inline,
+            },
+          ]"
+        >
+          {{ item.label }}
+        </p>
+        <component
+          :is="item.component"
+          v-if="item.component"
+          v-bind="item.props"
+        />
+        <slot
+          v-else-if="item.key && $slots[`${item.key}-item`]"
+          :name="`${item.key}-item`"
+          :row="item"
+          :item="item"
+          :value="item.value"
+          :label="item.label"
+        />
+        <div
+          v-else
+          class="whitespace-pre-line text-gray-900"
+        >
+          <span
+            v-if="shouldTruncateText(item)"
+            v-show="!expandedItems[item.label]"
+          >
+            {{ truncateText(item.value || '-', item.max || 0) }}
+            <button
+              class="
+              text-info-600 ml-1 cursor-pointer text-sm
+              hover:text-info-800
+            "
+              @click="toggleExpanded(item.label)"
+            >
+              เพิ่มเติม
+            </button>
+          </span>
+          <span
+            v-if="shouldTruncateText(item)"
+            v-show="expandedItems[item.label]"
+          >
+            {{ item.value || '-' }}
+            <button
+              class="
+              text-info-600 ml-1 cursor-pointer text-sm
+              hover:text-info-800
+            "
+              @click="toggleExpanded(item.label)"
+            >
+              แสดงน้อยลง
+            </button>
+          </span>
+          <!-- <span >
+          <Icon
+            class="size-5"
+            :class="item.value ? 'text-success' : 'text-error'"
+            :name="item.value
+              ? 'material-symbols:check-circle-outline-rounded'
+              : 'material-symbols:cancel-outline-rounded'"
+          />
+        </span> -->
+          <Checkbox
+            v-if="item.type === TYPE_INFO_ITEM.BOOLEAN"
+            v-model="item.value"
+            :label="item.label"
+            class="pointer-events-none"
+          />
+          <span v-else-if="!shouldTruncateText(item)">
+            {{ getValue(item) }}
+          </span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+enum TYPE_INFO_ITEM {
+  TEXT = 'text',
+  NUMBER = 'number',
+  CURRENCY = 'currency',
+  DATE = 'date',
+  DATE_TIME = 'date_time',
+  BOOLEAN = 'boolean',
+}
+
+defineProps<{
+  items: Array<{
+    label: string
+    value?: any
+    component?: any
+    props?: Record<string, any>
+    max?: number
+    key?: string
+    type?: TYPE_INFO_ITEM
+    customClass?: string
+    hide?: boolean
+  }>
+  vertical?: boolean
+  inline?: boolean
+  customClass?: string
+
+}>()
+
+const expandedItems = reactive<Record<string, boolean>>({})
+
+const shouldTruncateText = (item: any): boolean => {
+  return item.max && item.value && item.value.length > item.max
+}
+
+const truncateText = (text: string, maxLength: number): string => {
+  if (!maxLength || text.length <= maxLength) return text
+
+  return text.slice(0, maxLength) + '...'
+}
+
+const toggleExpanded = (label: string): void => {
+  expandedItems[label] = !expandedItems[label]
+}
+
+const getValue = (item: any): string => {
+  if (item.type === TYPE_INFO_ITEM.DATE) {
+    return item.value
+      ? new Date(item.value).toLocaleDateString('en', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+      : '-'
+  }
+
+  if (item.type === TYPE_INFO_ITEM.DATE_TIME) {
+    return item.value
+      ? new Date(item.value).toLocaleString('en', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+        timeZone: 'UTC',
+      })
+      : '-'
+  }
+
+  if (item.value === undefined || item.value === null) {
+    return '-'
+  }
+
+  if (typeof item.value === 'number') {
+    if (item.type === 'currency') {
+      return NumberHelper.toCurrency(item.value)
+    }
+
+    return NumberHelper.withFixed(item.value)
+  }
+
+  if (item.type === 'currency') {
+    return NumberHelper.toCurrency(item.value)
+  }
+
+  if (item.type === 'number') {
+    return NumberHelper.withFixed(item.value)
+  }
+
+  return item.value || '-'
+}
+</script>

package/app/components/Layout/Admin/Apps.vue

@@ -0,0 +1,45 @@
+<template>
+  <Popover
+    :content="{
+      align: 'center',
+      side: 'bottom',
+      sideOffset: 8,
+    }"
+  >
+    <Button
+      icon="mingcute:dot-grid-line"
+      variant="ghost"
+      class="text-gray-500"
+    />
+
+    <template #content>
+      <Card class="w-[300px]">
+        <div
+          class="grid grid-cols-3 gap-6"
+        >
+          <Button
+            v-for="item in auth.menusNavbar.value"
+            :key="item.to"
+            class="flex flex-col items-center p-0 text-center"
+            variant="link"
+            :to="item.to"
+          >
+            <div class="flex h-[42px] items-center justify-center">
+              <img
+                :src="item.icon"
+                class="h-auto w-[32px]"
+              />
+            </div>
+            <span class="text-sm font-medium text-gray-700">
+              {{ item.label }}
+            </span>
+          </Button>
+        </div>
+      </Card>
+    </template>
+  </Popover>
+</template>
+
+<script lang="ts" setup>
+const auth = useAuth()
+</script>