@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/selector/ConfigDataSelector.vue

@@ -1,136 +0,0 @@
-<script setup lang="ts">
-import api from "../../api/api";
-import { onMounted, onUnmounted } 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/template/src/components/settings/SettingsItem.vue

@@ -1,38 +0,0 @@
-<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/template/src/components/tab/TabView.vue

@@ -1,11 +0,0 @@
-<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/template/src/components/tab/TabViewItem.vue

@@ -1,18 +0,0 @@
-<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/template/src/components/tab/TabViewItemBar.vue

@@ -1,9 +0,0 @@
-<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/template/src/components/tables/CellHover.vue

@@ -1,65 +0,0 @@
-<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>