@dasidev/dasi-ui 1.0.0

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

@@ -0,0 +1,11 @@
+<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/src/components/ui/popover/index.ts

@@ -0,0 +1,4 @@
+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/src/components/ui/preview/PreviewPdf.vue

@@ -0,0 +1,118 @@
+<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/src/components/ui/progress/ProgressCircle.vue

@@ -0,0 +1,27 @@
+<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/src/components/ui/progress/SemiCircularProgressBar.vue

@@ -0,0 +1,83 @@
+<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/src/components/ui/progress/TotalCalories.vue

@@ -0,0 +1,31 @@
+<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/src/components/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,25 @@
+<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/src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,37 @@
+<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/src/components/ui/radio-group/index.ts

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

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

@@ -0,0 +1,29 @@
+<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/src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,30 @@
+<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/src/components/ui/scroll-area/index.ts

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

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

@@ -0,0 +1,15 @@
+<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/src/components/ui/select/SelectContent.vue

@@ -0,0 +1,52 @@
+<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/src/components/ui/select/SelectGroup.vue

@@ -0,0 +1,19 @@
+<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/src/components/ui/select/SelectInline.vue

@@ -0,0 +1,84 @@
+<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/src/components/ui/select/SelectItem.vue

@@ -0,0 +1,44 @@
+<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/src/components/ui/select/SelectItemText.vue

@@ -0,0 +1,11 @@
+<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/src/components/ui/select/SelectLabel.vue

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