@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/ui/popover/PopoverTrigger.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
-
-const props = defineProps<PopoverTriggerProps>()
-</script>
-
-<template>
-  <PopoverTrigger v-bind="props">
-    <slot />
-  </PopoverTrigger>
-</template>

package/template/src/components/ui/popover/index.ts

@@ -1,4 +0,0 @@
-export { PopoverAnchor } from 'radix-vue'
-export { default as Popover } from './Popover.vue'
-export { default as PopoverTrigger } from './PopoverTrigger.vue'
-export { default as PopoverContent } from './PopoverContent.vue'

package/template/src/components/ui/preview/PreviewPdf.vue

@@ -1,118 +0,0 @@
-<script setup>
-import VuePdfEmbed from 'vue-pdf-embed'
-import { ref, reactive, onMounted, watchEffect } from 'vue'
-import { FileInput } from 'lucide-vue-next'
-
-const isLoading = ref(true)
-const showAllPages = ref(false)
-const page = ref(null)
-const pageCount = ref(null)
-const props = defineProps({
-  url: {
-    type: String,
-    required: true
-  },
-  title: {
-    type: String
-  }
-})
-
-function handleDocumentLoad ({ numPages }) {
-  pageCount.value = numPages
-}
-
-function handleDocumentRender () {
-  isLoading.value = false
-}
-
-function handlePasswordRequest ({ callback, isWrongPassword }) {
-  callback(prompt(isWrongPassword ? 'Enter password again' : 'Enter password'))
-}
-
-watchEffect(() => {
-  if (showAllPages.value) {
-    page.value = null // null displays all pages
-  } else if (page.value === null) {
-    page.value = 1 // Set to page 1 if we're switching from "show all pages"
-  }
-})
-</script>
-
-<template>
-  <div class="pdf-container">
-    <div class="pdf-header bg-slate-100">
-      <span v-if="showAllPages"> {{ pageCount }} page(s) </span>
-
-      <span v-else>
-        <button :disabled="page <= 1" @click="page--">❮</button>
-
-        {{ page }} / {{ pageCount }}
-
-        <button :disabled="page >= pageCount" @click="page++">❯</button>
-      </span>
-      <h2 v-if="props.title">{{ props.title }}</h2>
-      <label class="text-right">
-        <input v-model="showAllPages" type="checkbox" />
-        Show all pages
-      </label>
-      <a :href="props.url" target="_blank" download class="download-btn">
-        <FileInput />
-      </a>
-    </div>
-
-    <div class="app-content bg-slate-100">
-      <vue-pdf-embed ref="pdfRef" :source="props.url" :page="page" @password-requested="handlePasswordRequest"
-        @loaded="handleDocumentLoad" @rendered="handleDocumentRender" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.vue-pdf-embed>div {
-  margin-bottom: 8px;
-  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
-}
-
-.app-header {
-  padding: 16px;
-  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
-  background-color: #555;
-  color: #ddd;
-}
-
-.app-content {
-  padding: 24px 16px;
-}
-
-.pdf-container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.pdf-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-
-  h2 {
-    margin: 0;
-    font-size: 1.5rem;
-  }
-
-  .download-btn {
-    padding: 8px;
-    background-color: white;
-    color: black;
-    border-radius: 5px;
-    text-decoration: none;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.538);
-    }
-  }
-}
-</style>

package/template/src/components/ui/progress/ProgressCircle.vue

@@ -1,27 +0,0 @@
-<template>
-	<div class="flex flex-row gap-3 items-center">
-		<div class="flex flex-col">
-			<p class="text-sm font-semibold text-gray-600 mt-2">{{ label }}</p>
-			<p class="text-lg font-bold text-gray-800">{{ percentage }}%</p>
-		</div>
-		<CircleProgress
-			:size="50"
-			:border-width="8"
-			:border-bg-width="8"
-			:fill-color="color"
-			:percent="percentage"
-			backgroundColor="#E5E7E9"
-		/>
-	</div>
-</template>
-
-<script setup>
-import "vue3-circle-progress/dist/circle-progress.css";
-import CircleProgress from "vue3-circle-progress";
-
-const props = defineProps({
-	label: String,
-	percentage: Number,
-	color: String,
-});
-</script>

package/template/src/components/ui/progress/SemiCircularProgressBar.vue

@@ -1,83 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import ApexCharts from "vue3-apexcharts";
-
-const props = defineProps(['progress', 'status', 'color']);
-const progress = 30;
-const showKritis = ref(false);
-
-const chartOptions = ref({
-	chart: {
-		type: "radialBar",
-		// offsetY: -25,
-		sparkline: {
-			// enabled: true,
-		},
-	},
-	plotOptions: {
-		radialBar: {
-			startAngle: -90,
-			endAngle: 90,
-      hollow: {
-        margin: 0,
-        size: "60%",
-      },
-			track: {
-				background: "#E5F0F8",
-				strokeWidth: "100%",
-			},
-			dataLabels: {
-				show: false,
-			},
-		},
-	},
-  stroke: {
-    lineCap: "round",
-  },
-	colors: [props.color], // Color for the progress bar
-	tooltip: {
-		enabled: true,
-		custom: function ({ series, seriesIndex, dataPointIndex, w }) {
-			return (
-				'<div class="arrow_box">' +
-				'<div class="flex items-center py-1.5 px-2.5">' +
-				`<span class="inline-block size-2.5 rounded-full mr-2" style="background-color: ${props.color};"></span>` +
-				`<span>${props.status}</span>` +
-				"</div>" +
-				"</div>"
-			);
-		},
-		// fixed: {
-		// 	enabled: true,
-		// 	position: "topLeft",
-		// 	offsetX: 80,
-		// 	offsetY: 50,
-		// },
-		// style: {
-		// 	fontSize: "12px",
-		// 	fontFamily: undefined,
-		// },
-	},
-});
-</script>
-
-<template>
-	<div class="flex items-center justify-between -ml-12">
-		<div class="relative text-center">
-			<div class="-mt-6 -mb-20 ml-2">
-				<ApexCharts
-					type="radialBar"
-					width="340"
-					height="340"
-					:options="chartOptions"
-					:series="[props.progress]"
-					class="mx-auto"
-				/>
-			</div>
-
-			<div class=" absolute left-0 right-0 bottom-7">
-        <slot></slot>
-			</div>
-		</div>
-	</div>
-</template>

package/template/src/components/ui/progress/TotalCalories.vue

@@ -1,31 +0,0 @@
-<script setup>
-import { formatNumber } from '../../../lib/utils';
-
-defineProps(['kalori']);
-</script>
-
-<template>
-	<div class="w-2/3" v-if="kalori">
-		<div class="flex flex-row justify-between border-b pb-1 mb-1.5">
-			<p class="font-semibold text-[15px]">
-				Total Kalori Tertimbang
-			</p>
-			<p class="text-[15px] font-semibold text-blue-600 text-right">
-				{{ formatNumber(kalori.totalKaloriTertimbang || 0) }}
-        <span class="opacity-75 text-gray-500 text-sm font-normal">Kcal</span>
-			</p>
-		</div>
-		<div>
-			<div v-for="calory in kalori.rencanaPasokan || []" :key="calory.spek"
-				class="flex justify-between py-1.5 text-gray-700">
-				<span class="text-[#7F7F80] text-xs font-normal">
-          {{ calory.spek }}
-        </span>
-				<span class="font-semibold text-xs text-[#333333]">
-          {{ formatNumber(calory.volumeTotal || 0) }}
-					<span class="text-[#7F7F80] text-xs font-normal"> MT</span>
-        </span>
-			</div>
-		</div>
-	</div>
-</template>

package/template/src/components/ui/radio-group/RadioGroup.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<RadioGroupRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <RadioGroupRoot
-    :class="cn('grid gap-2', props.class)"
-    v-bind="forwarded"
-  >
-    <slot />
-  </RadioGroupRoot>
-</template>

package/template/src/components/ui/radio-group/RadioGroupItem.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  RadioGroupIndicator,
-  RadioGroupItem,
-  type RadioGroupItemProps,
-  useForwardProps,
-} from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <RadioGroupItem
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <RadioGroupIndicator class="flex items-center justify-center">
-      <CheckIcon class="h-3.5 w-3.5 fill-primary" />
-    </RadioGroupIndicator>
-  </RadioGroupItem>
-</template>

package/template/src/components/ui/radio-group/index.ts

@@ -1,2 +0,0 @@
-export { default as RadioGroup } from './RadioGroup.vue'
-export { default as RadioGroupItem } from './RadioGroupItem.vue'

package/template/src/components/ui/scroll-area/ScrollArea.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  type ScrollAreaRootProps,
-  ScrollAreaViewport,
-} from 'radix-vue'
-import ScrollBar from './ScrollBar.vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
-      <slot />
-    </ScrollAreaViewport>
-    <ScrollBar />
-    <ScrollAreaCorner />
-  </ScrollAreaRoot>
-</template>

package/template/src/components/ui/scroll-area/ScrollBar.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
-import { cn } from '../../../lib/utils'
-
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
-  orientation: 'vertical',
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ScrollAreaScrollbar
-    v-bind="delegatedProps"
-    :class="
-      cn('flex touch-none select-none transition-colors',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent p-px',
-         orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent p-px',
-         props.class)"
-  >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaScrollbar>
-</template>

package/template/src/components/ui/scroll-area/index.ts

@@ -1,2 +0,0 @@
-export { default as ScrollArea } from './ScrollArea.vue'
-export { default as ScrollBar } from './ScrollBar.vue'

package/template/src/components/ui/select/Select.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <SelectRoot v-bind="forwarded">
-    <slot />
-  </SelectRoot>
-</template>

package/template/src/components/ui/select/SelectContent.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  SelectContent,
-  type SelectContentEmits,
-  type SelectContentProps,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
-import { cn } from '../../../lib/utils'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
-    position: 'popper',
-  },
-)
-const emits = defineEmits<SelectContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SelectPortal>
-    <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
-</template>

package/template/src/components/ui/select/SelectGroup.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
-    <slot />
-  </SelectGroup>
-</template>

package/template/src/components/ui/select/SelectInline.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxRoot, ComboboxTrigger, ComboboxViewport, Separator } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next';
-import { cn } from '../../../lib/utils';
-
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: 'Placeholder'
-  },
-  options: {
-    type: Array as any,
-    default: () => [],
-  },
-  class: {
-    type: String,
-    default: ''
-  },
-  anchorClass: {
-    type: String,
-    default: ''
-  },
-  inputClass: {
-    type: String,
-    default: ''
-  },
-  contentClass: {
-    type: String,
-    default: ''
-  },
-  itemClass: {
-    type: String,
-    default: ''
-  },
-  optionAttribute: {
-    type: String,
-    default: 'label'
-  },
-  valueAttribute: {
-    type: String,
-    default: 'value'
-  },
-  descriptionAttribute: {
-    type: String,
-    default: 'descsription'
-  }
-})
-
-const selectedValue = defineModel('selectedValue', { type: String })
-</script>
-
-<template>
-  <ComboboxRoot v-model="selectedValue" :class="cn('relative', props.class)">
-    <ComboboxAnchor
-      class="flex h-10 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 w-full">
-      <ComboboxTrigger class="flex w-full justify-between">
-        <ComboboxInput class="!bg-transparent outline-none text-md h-full capitalize" :value="selectedValue"
-          :placeholder="props.placeholder" />
-        <ChevronDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </ComboboxTrigger>
-    </ComboboxAnchor>
-
-    <ComboboxContent
-      :class="cn('border absolute z-10 mt-2 w-full min-w-[160px] bg-white overflow-hidden rounded will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade', props.contentClass)">
-      <ComboboxViewport class="p-[5px]">
-        <slot name="empty">
-          <ComboboxEmpty class="text-mauve8 text-sm font-medium text-center py-2" />
-        </slot>
-        <ComboboxGroup>
-          <ComboboxItem v-for="(option, index) in props.options" :key="`${option[valueAttribute]}-${index}`"
-            :class="cn(props.itemClass, 'pl-2 relative flex w-full cursor-pointer select-none items-center data-[state=checked]:bg-accent hover:bg-accent rounded-sm py-1.5 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[checked]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50')"
-            :value="option[valueAttribute]" :disabled="option.disabled">
-            <slot name="option" :option="option">
-              <div class="flex flex-col">
-                <div>{{ option[optionAttribute] }}</div>
-                <div v-if="option[descriptionAttribute]">{{ option[descriptionAttribute] }}</div>
-              </div>
-            </slot>
-          </ComboboxItem>
-        </ComboboxGroup>
-      </ComboboxViewport>
-    </ComboboxContent>
-  </ComboboxRoot>
-</template>

package/template/src/components/ui/select/SelectItem.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  SelectItem,
-  SelectItemIndicator,
-  type SelectItemProps,
-  SelectItemText,
-  useForwardProps,
-} from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <SelectItem
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectItemIndicator>
-        <CheckIcon class="h-4 w-4" />
-      </SelectItemIndicator>
-    </span>
-
-    <SelectItemText>
-      <slot />
-    </SelectItemText>
-  </SelectItem>
-</template>

package/template/src/components/ui/select/SelectItemText.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
-
-const props = defineProps<SelectItemTextProps>()
-</script>
-
-<template>
-  <SelectItemText v-bind="props">
-    <slot />
-  </SelectItemText>
-</template>

package/template/src/components/ui/select/SelectLabel.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { SelectLabel, type SelectLabelProps } from 'radix-vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
-    <slot />
-  </SelectLabel>
-</template>