@dasidev/dasi-ui 1.0.0

package/src/components/selector/ConfigDataSelector.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import api from "@/api/api";
+import { onMounted, onUnmounted, watch } from "vue";
+import { ref } from "vue";
+import { cn, getMenuItemByUrl, isValidValue } from "@/lib/utils";
+import { LucideChevronDown, LucideLoaderCircle, LucideSettings, LucideX } from "lucide-vue-next";
+import BtnCircle from "../button/BtnCircle.vue";
+
+const data = ref<{ name: string; code: string}[]>([]);
+const model = defineModel<string | null>({ default: "" });
+const props = defineProps(["parentCode", "placeholder", "disabled", "class", "field", "disableAutoLoad"]);
+const selectorOpen = ref(false);
+const loading = ref(true);
+const configDataMenu = ref<any>();
+
+function docClicked() {
+  selectorOpen.value = false;
+}
+
+function clearItem() {
+  if (props.disabled) return;
+	model.value = null;
+}
+
+function openSelector() {
+  if (props.disabled) return;
+  selectorOpen.value = !selectorOpen.value;
+  if (!isValidValue(data.value)) getData();
+}
+
+function selectItem(item: any) {
+  model.value = props.field ? (item as any)[props.field] : item.code;
+  selectorOpen.value = false;
+}
+
+function getData() {
+	api.get(`/config-data?condition=parent-code:${props.parentCode}&limit=250&orderBy=name&sort=asc`).then((r) => {
+    data.value = r.data.data;
+  }).finally(() => {
+    loading.value = false;
+  });
+}
+
+function gotoConfigData() {
+  if (!configDataMenu.value) return;
+  const uri = `${configDataMenu.value.url}?search=${props.parentCode}`;
+  window.open(uri, '_blank', 'noopener');
+}
+
+onUnmounted(() => {
+  document.removeEventListener('click', docClicked)
+})
+
+onMounted(() => {
+  if (model.value && typeof model.value === 'object'
+    && (model.value as any).length > 0 && props.field === 'id') {
+    model.value = (model.value as any)[0].id;
+  }
+  document.addEventListener('click', docClicked)
+
+  configDataMenu.value = getMenuItemByUrl('/konfigurasi-data/config-data');
+
+  if (!props.disableAutoLoad) getData();
+});
+</script>
+
+<template>
+	<div :class="cn('relative w-full flex flex-1 transition-input duration-200 border-solid form-border-width-input form-shadow-input form-input-group group form-radius-input-lg form-bg-input form-color-input form-border-color-input hover:form-bg-input-hover hover:form-color-input-hover hover:form-border-color-input-hover hover:form-shadow-input-hover focused:form-bg-input-focus focused:form-color-input-focus focused:form-border-color-input-focus focused:form-shadow-input-focus focused:form-ring focused-hover:form-shadow-input-hover min-h-0', props.class)">
+		<div
+			class="w-full bg-transparent form-p-input-lg form-radius-input-lg form-text-lg with-floating:form-p-input-floating-lg border-0 form-color-input group-hover:form-color-input-hover form-autofill-default relative cursor-pointer"
+      :class="{'!cursor-default': props.disabled}"
+			v-on:click.stop="openSelector"
+		>
+      <template v-if="model">
+        <template v-for="(item, i) in data" :key="i">
+          <template v-if="(props.field ? (item as any)[props.field] : item.code) === model">
+            {{ item.name }}
+          </template>
+        </template>
+      </template>
+      <span class="opacity-30" v-else>
+        {{ placeholder || "Pilih konfig data..." }}
+      </span>
+      <!-- <div class="fixed bg-black left-0 top-0 right-0 bottom-0 z-[8]"></div> -->
+      <div class="absolute left-0 top-full right-0 rounded-md shadow-md border bg-white dark:bg-dark_bg5 z-9"
+        v-if="selectorOpen">
+        <div class="flex justify-between p-3 py-1 text-[13px] font-medium bg-slate-100 dark:bg-dark_bg5 border-b">
+          <span class="text-slate-500 opacity-75">{{ placeholder }}</span>
+          <button v-if="model" @click="clearItem" class="text-red-500 hover:text-red-700">Reset</button>
+        </div>
+        <div class="py-10" v-if="loading">
+          <LucideLoaderCircle class="animate-spin mx-auto opacity-60" :stroke-width="1.2"/>
+        </div>
+        <div class="py-8 px-4 text-center" v-if="data.length < 1">
+          <h4 class="font-medium">Konfig Data Belum Ditetapkan</h4>
+          <div class="text-xs max-w-[300px] mx-auto">
+            <template v-if="configDataMenu">
+              Mohon tetapkan konfig data untuk opsi ini pada halaman konfig data.
+              <button class="flex items-center w-fit mx-auto gap-1.5 rounded-md border pl-2 pr-3 text-blue-500 py-1.5 mt-3 hover:bg-blue-100 hover:border-blue-300 hover:text-blue-500 transition"
+                @click="gotoConfigData">
+                <LucideSettings :size="16" :stroke-width="1.8"/>
+                {{ configDataMenu.name }}
+              </button>
+            </template>
+            <template v-else>
+              Mohon untuk menghubungi tim Support terkait konfig data unutk opsi ini.
+            </template>
+          </div>
+        </div>
+        <div class="space-y-1 p-1" v-else>
+          <div class="px-3 py-1.5 cursor-pointer transition hover:bg-slate-100 dark:bg-dark_bg5 hover:dark:bg-slate-800 rounded-md p-1"
+            :class="{'!bg-slate-200 dark:!bg-dark_bg5': (props.field ? (item as any)[props.field] : item.code) === model}"
+            v-for="(item, i) in data" :key="i"
+            v-on:click.stop="selectItem(item)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+		</div>
+    <div class="flex items-center absolute right-2 h-6 top-2">
+      <BtnCircle class="!size-[22px]"
+        v-if="configDataMenu" @click="gotoConfigData">
+        <LucideSettings :size="16" :stroke-width="1.6" class="opacity-80"/>
+      </BtnCircle>
+      <BtnCircle class="right-2 !size-[22px]"
+        v-if="model" @click="clearItem">
+        <LucideX :size="14"/>
+      </BtnCircle>
+      <BtnCircle class="right-2 !size-[22px]"
+        @click.stop="openSelector">
+        <LucideChevronDown :size="18" class="transition-transform"
+          :class="{'rotate-180': selectorOpen}"/>
+      </BtnCircle>
+    </div>
+	</div>
+</template>

package/src/components/settings/SettingsItem.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { LucideEdit } from 'lucide-vue-next'
+
+const props = defineProps(['canEdit'])
+const emits = defineEmits(['edit'])
+</script>
+
+<template>
+  <div class="text-[16px] mb-4">
+    <div class="font-medium ml-2 mb-1.5 text-sm">
+      <slot name="label"></slot>
+    </div>
+    <div
+      class="font-medium inline-block rounded border px-3 py-2.5 bg-white min-w-[300px] transition
+        dark:bg-slate-900 dark:border-slate-700"
+      :class="{
+        'cursor-pointer hover:bg-slate-50 hover:shadow-md dark:hover:bg-slate-800': props.canEdit
+      }"
+      v-on:click="emits('edit')"
+    >
+      <div class="flex items-center">
+        <slot name="value"></slot>
+        <div
+          class="flex items-center text-dasi_primary hover:text-dasi_primary_hover font-normal text-sm cursor-pointer transition ml-auto
+            dark:text-dasi_primary dark:hover:text-dasi_primary_hover"
+          v-if="props.canEdit"
+        >
+          <slot name="editBtnContent">
+            <LucideEdit :size="18" class="mr-1"/>
+            <slot name="editBtnLabel">
+              Ubah
+            </slot>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/tab/TabView.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+
+const props = defineProps(['class'])
+</script>
+
+<template>
+  <div :class="cn('flex items-center', props.class)">
+    <slot></slot>
+  </div>
+</template>

package/src/components/tab/TabViewItem.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import TabViewItemBar from "./TabViewItemBar.vue";
+
+const props = defineProps(["active"]);
+</script>
+
+<template>
+  <main>
+    <div class="flex items-center">
+      <div class="group relative mr-8 cursor-pointer py-2 pr-1 text-sm font-semibold text-gray-500 dark:text-gray-300 2xl:py-3" :class="{ 'text-primary_main': props.active }">
+        <slot></slot>
+        <slot name="bar">
+          <TabViewItemBar :class="{ '!bg-primary_main': props.active }"></TabViewItemBar>
+        </slot>
+      </div>
+    </div>
+  </main>
+</template>

package/src/components/tab/TabViewItemBar.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+
+const props = defineProps(['class']);
+</script>
+
+<template>
+  <div :class="cn('absolute left-0 bottom-0 right-0 h-0.5 2xl:h-1 rounded-t-full group-hover:bg-gray-400 transition', props.class)"></div>
+</template>

package/src/components/tables/CellHover.vue

@@ -0,0 +1,65 @@
+<script setup>
+import DetailContentTablet from '@/components/detail/DetailContentTablet.vue'
+import { LucideCalendarClock, LucideCircleUserRound } from 'lucide-vue-next';
+import moment from 'moment';
+
+defineProps(['data']);
+</script>
+
+<template>
+  <section class="-mb-5">
+    <section class="mb-3">
+      <div class="flex uppercase text-[11px] font-semibold tracking-wider mb-[4px]"
+        :class="{'text-blue-600': data.status === 'published',
+        'text-orange-500': ['waiting_approval', 'parialy_approved'].includes(data.status)}"
+        v-if="data.status">
+        <div class="flex-none w-[5px] rounded-full mr-2"
+        :class="{'bg-blue-600': data.status === 'published',
+        'bg-orange-500': ['waiting_approval', 'parialy_approved'].includes(data.status)}"></div>
+        {{ data.status.replace(/_/g, ' ') }}
+      </div>
+      <div class="font-semibold text-[16px] mb-1 leading-tight">{{ data.name }}</div>
+      <div class="text-gray-400 text-[12px]" v-if="data.code">{{ data.code }}</div>
+      <div class="text-[14px] text-gray-500 mb-1" v-if="data.description">{{ data.description }}</div>
+    </section>
+    <section class="mb-3">
+      <div class="uppercase text-[11px] font-semibold text-gray-400 mb-1">Created</div>
+      <ul class="flex -ml-1 -mb-2">
+        <DetailContentTablet class="text-xs">
+          <LucideCalendarClock :size="16" class="mr-2 text-gray-400"/>
+          {{ moment(data.createdAt).utc().format('DD/MM/YYYY HH:mm') }}
+        </DetailContentTablet>
+        <DetailContentTablet v-if="data.creatorName">
+          <LucideCircleUserRound :size="17" class="-ml-px mr-2 text-gray-400"/>
+          {{ data.creatorName }}
+        </DetailContentTablet>
+      </ul>
+    </section>
+    <section class="mb-3" v-if="data.updatedAt && data.updatedAt !== data.createdAt">
+      <div class="uppercase text-[11px] font-semibold text-gray-400 mb-1">Updated</div>
+      <ul class="flex -ml-1 -mb-2">
+        <DetailContentTablet class="text-xs">
+          <LucideCalendarClock :size="16" class="mr-2 text-gray-400"/>
+          {{ moment(data.updatedAt).utc().format('DD/MM/YYYY HH:mm') }}
+        </DetailContentTablet>
+        <DetailContentTablet v-if="data.updaterName">
+          <LucideCircleUserRound :size="17" class="-ml-px mr-2 text-gray-400"/>
+          {{ data.updaterName }}
+        </DetailContentTablet>
+      </ul>
+    </section>
+    <section class="mb-3" v-if="1>2">
+      <div class="uppercase text-[11px] font-semibold text-red-500 mb-1">Deleted</div>
+      <ul class="flex -ml-1 -mb2">
+        <DetailContentTablet class="text-xs bg-red-50 text-red-500">
+          <LucideCalendarClock :size="16" class="mr-2"/>
+          15 Jan 2024 17:43
+        </DetailContentTablet>
+        <DetailContentTablet class="text-xs bg-red-50 text-red-500">
+          <LucideCircleUserRound :size="17" class="-ml-px mr-2"/>
+          Admin lorem ipsum
+        </DetailContentTablet>
+      </ul>
+    </section>
+  </section>
+</template>