pimelon-ui 0.1.67 → 0.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -66,7 +66,7 @@
     "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
     "histoire": "^0.17.14",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
     "prettier": "3.3.2",

package/src/components/CircularProgressBar.story.md

@@ -0,0 +1,43 @@
+## Props
+
+### step
+
+The current step of the progress bar. It is required.
+
+### totalSteps
+
+The total number of steps in the progress bar. Default value is 100. It is
+required.
+
+### showPercentage
+
+If true, the percentage of the progress will be shown in the center of the
+circle. Else, the absolute value of the current step will be shown. Default
+value is false.
+
+### size
+
+The size of the progress bar. Default value is 'md'. Available options are 'xs',
+'sm', 'md', 'lg', 'xl'.
+
+### theme
+
+The theme of the progress bar. Default value is 'black'. Available options are
+'black', 'red', 'green', 'blue', 'orange'.
+
+If a string is passed, the predefined theme will be used, and if the color does
+not match any predefined theme, the default theme will be used. If a custom
+theme is needed, an object with primary and secondary colors can be passed.
+
+### themeComplete
+
+The color of the completed progress. Default value is #76f7be (light green).
+
+### variant
+
+The variant of the progress bar. Default value is 'solid'. Available options are
+'solid', 'outline'.
+
+When the variant is 'solid', the progress bar on complete will be filled with
+the progress color. When the variant is 'outline', the progress bar on complete
+will be an outline with the progress color.

package/src/components/CircularProgressBar.story.vue

@@ -0,0 +1,62 @@
+<template>
+  <Story :layout="{ type: 'grid', width: 500, heigt: 500 }">
+    <Variant title="Default">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar :step="1" :totalSteps="4" />
+      </div>
+    </Variant>
+    <Variant title="Size">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="1"
+          :totalSteps="4"
+          size="lg"
+          :showPercentage="true"
+        />
+      </div>
+    </Variant>
+    <Variant title="Theme">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar :step="3" :totalSteps="4" theme="orange" />
+      </div>
+    </Variant>
+    <Variant title="Custom Theme">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="2"
+          :totalSteps="6"
+          :theme="{
+            primary: '#2376f5',
+            secondary: '#ddd5d5',
+          }"
+        />
+      </div>
+    </Variant>
+    <Variant title="Solid Variant">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="9"
+          :totalSteps="9"
+          variant="solid"
+          themeComplete="lightgreen"
+        />
+      </div>
+    </Variant>
+    <Variant title="Outline Variant">
+      <div class="p-2 w-full h-full">
+        <CircularProgressBar
+          :step="9"
+          :totalSteps="9"
+          variant="outline"
+          themeComplete="lightgreen"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup>
+import CircularProgressBar from './CircularProgressBar.vue'
+</script>
+
+<style></style>

package/src/components/CircularProgressBar.vue

@@ -0,0 +1,190 @@
+<template>
+  <div
+    class="progressbar"
+    role="progressbar"
+    :class="{
+      completed: isCompleted,
+      fillOuter: variant === 'outline',
+    }"
+  >
+    <div v-if="!isCompleted">
+      <p v-if="!showPercentage">{{ step }}</p>
+      <p v-else>{{ progress.toFixed(0) }}%</p>
+    </div>
+    <div v-else class="check-icon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  step: number
+  totalSteps: number
+  showPercentage?: boolean
+  variant?: Variant
+  theme?: string | ThemeProps
+  size?: Size
+  themeComplete?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  totalSteps: 4,
+  showPercentage: false,
+  theme: 'black',
+  size: 'md',
+  themeComplete: 'lightgreen',
+  variant: 'solid',
+})
+
+type Variant = 'solid' | 'outline'
+
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+interface SizeProps {
+  ringSize: string
+  ringBarWidth: string
+  innerTextFontSize: string
+}
+
+// predefined sizes for the circular progress bar
+const sizeMap: Record<Size, SizeProps> = {
+  xs: {
+    ringSize: '30px',
+    ringBarWidth: '6px',
+    innerTextFontSize: props.showPercentage ? '8px' : '12px',
+  },
+  sm: {
+    ringSize: '42px',
+    ringBarWidth: '10px',
+    innerTextFontSize: props.showPercentage ? '12px' : '16px',
+  },
+  md: {
+    ringSize: '60px',
+    ringBarWidth: '14px',
+    innerTextFontSize: props.showPercentage ? '16px' : '20px',
+  },
+  lg: {
+    ringSize: '84px',
+    ringBarWidth: '18px',
+    innerTextFontSize: props.showPercentage ? '20px' : '24px',
+  },
+  xl: {
+    ringSize: '108px',
+    ringBarWidth: '22px',
+    innerTextFontSize: props.showPercentage ? '24px' : '28px',
+  },
+}
+
+const size = computed(() => sizeMap[props.size] || sizeMap['md'])
+
+type Theme = 'black' | 'red' | 'green' | 'blue' | 'orange'
+interface ThemeProps {
+  primary: string
+  secondary: string
+}
+// predefined themes for the circular progress bar
+const themeMap: Record<Theme, ThemeProps> = {
+  black: {
+    primary: '#333',
+    secondary: '#888',
+  },
+  red: {
+    primary: '#FF0000',
+    secondary: '#FFD7D7',
+  },
+  green: {
+    primary: '#22C55E',
+    secondary: '#b1ffda',
+  },
+  blue: {
+    primary: '#2376f5',
+    secondary: '#D7D7FF',
+  },
+  orange: {
+    primary: '#FFA500',
+    secondary: '#FFE5CC',
+  },
+}
+
+const theme = computed(() => {
+  if (typeof props.theme === 'string') {
+    return themeMap[props.theme as Theme] || themeMap['black']
+  }
+  return props.theme
+})
+
+const progress = computed(() => (props.step / props.totalSteps) * 100)
+const isCompleted = computed(() => props.step === props.totalSteps)
+</script>
+
+<style scoped>
+.progressbar {
+  --size: v-bind(size.ringSize);
+  --bar-width: v-bind(size.ringBarWidth);
+  --font-size: v-bind(size.innerTextFontSize);
+  --color-progress: v-bind(theme.primary);
+  --color-remaining-circle: v-bind(theme.secondary);
+  --color-complete: v-bind($props.themeComplete);
+  --progress: v-bind(progress + '%');
+
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+
+  position: relative;
+  font-size: var(--font-size);
+}
+@property --progress {
+  syntax: '<length-percentage>';
+  inherits: true;
+  initial-value: 0%;
+}
+
+.progressbar::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: conic-gradient(
+    var(--color-progress) var(--progress),
+    var(--color-remaining-circle) 0%
+  );
+  transition: --progress 500ms linear;
+  aspect-ratio: 1 / 1;
+  align-self: center;
+}
+
+.progressbar::after {
+  content: '';
+  position: absolute;
+  background: white;
+  border-radius: inherit;
+  z-index: 1;
+  width: calc(100% - var(--bar-width));
+  aspect-ratio: 1 / 1;
+}
+
+.progressbar > div {
+  z-index: 2;
+  position: relative;
+}
+
+.progressbar.completed:not(.fillOuter)::after {
+  background: var(--color-complete);
+}
+.progressbar.completed.fillOuter::before {
+  background: var(--color-complete);
+}
+
+.check-icon {
+  width: 15px;
+  height: 15px;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUiIGhlaWdodD0iODUiIHZpZXdCb3g9IjUgMzAgNzUgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNS40MjM3IDUzLjczMjdMNjcuOTc4NyAyMS4xNzc3TDcyLjk4OTUgMjYuMTg0MkwzNS40MTk1IDYzLjc1TDEyLjg4NiA0MS4yMTIyTDE3Ljg5MjUgMzYuMjAxNUwzNS40MjM3IDUzLjczMjdaIiBmaWxsPSIjMWYxYTM4Ii8+Cjwvc3ZnPgo=');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>

package/src/components/Textarea.story.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Textarea from './Textarea.vue'
+const state = reactive({
+  size: 'sm',
+  placeholder: 'Placeholder',
+  disabled: false,
+  modelValue: '',
+  label: 'Label',
+})
+const sizes = ['sm', 'md', 'lg', 'xl']
+const variants = ['subtle', 'outline']
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant v-for="type in variants" :key="type" :title="`${type} variant`">
+      <Textarea :variant="type" v-bind="state" />
+    </Variant>
+
+    <template #controls>
+      <HstSelect v-model="state.size" :options="sizes" title="Size" />
+    </template>
+  </Story>
+</template>

package/src/components/Textarea.vue

@@ -1,15 +1,20 @@
 <template>
-  <textarea
-    :placeholder="placeholder"
-    :class="inputClasses"
-    :disabled="disabled"
-    :id="id"
-    :value="modelValue"
-    :rows="rows"
-    @input="handleChange"
-    @change="handleChange"
-    v-bind="attrs"
-  />
+  <div class="space-y-1.5">
+    <label class="block" :class="labelClasses" v-if="label" :for="id">
+      {{ label }}
+    </label>
+    <textarea
+      :placeholder="placeholder"
+      :class="inputClasses"
+      :disabled="disabled"
+      :id="id"
+      :value="modelValue"
+      :rows="rows"
+      @input="handleChange"
+      @change="handleChange"
+      v-bind="attrs"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -26,6 +31,7 @@ interface TextareaProps {
   modelValue?: string
   debounce?: number
   rows?: number
+  label?: string
 }
 
 const props = withDefaults(defineProps<TextareaProps>(), {
@@ -74,6 +80,18 @@ const inputClasses = computed(() => {
   ]
 })
 
+const labelClasses = computed(() => {
+  return [
+    {
+      sm: 'text-xs',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    }[props.size],
+    'text-gray-600',
+  ]
+})
+
 let emitChange = (value: string) => {
   emit('update:modelValue', value)
 }

package/src/components/Tooltip/Tooltip.vue

@@ -47,7 +47,7 @@ const delayDuration = computed(() => props.hoverDelay * 1000)
           v-if="props.text || $slots.body"
           :side="props.placement"
           :side-offset="4"
-          class="z-10"
+          class="z-[100]"
         >
           <slot name="body">
             <div

package/src/components/Tree/Tree.story.md

@@ -0,0 +1,56 @@
+## Props
+
+#### Node
+
+An object representing the Root node of the Tree. Each node must contain the
+following properties:
+
+- **label** (string) - Name of the node.
+
+- **children** (Node[]) - An array of nodes representing the children of the
+  current node.
+
+<br>
+
+#### Options
+
+- **rowHeight** (string) - Line height for the nodes passed. Defaults to `25px`.
+
+- **indentWidth** (string) - Width for the indentation at each depth of the
+  tree. Gets incremented with every nested sub-tree. Defaults to `15px`.
+
+- **showIndentationGuides** (boolean) - Flag for displaying LHS lines. Defaults
+  to `true`.
+
+<br>
+
+## Slots
+
+#### 1. Custom Node
+
+Slot to optionally override the template for the entire node. It exposes the
+following slot props:
+
+- **node** (object) - The current node containing label and children attributes.
+
+- **hasChildren** (boolean) - Whether current node is a leaf node.
+
+- **isCollapsed** (boolean) - Whether current node is collapsed.
+
+- **toggleCollapsed** (function) - Function to expand or collapse the node.
+
+Example:
+
+    // Customising node to show needed Context Menu
+    <template #node="{ node, hasChildren, isCollapsed, toggleCollapsed }">
+        <div class="flex items-center" @click.right="showContextMenu(node)">
+        ...
+        </div>
+    </template>
+
+<br>
+
+#### 2. Custom Label / Icon
+
+`label` and `icon` slots to quickly add custom styles without overriding the
+entire node.

package/src/components/Tree/Tree.story.vue

@@ -0,0 +1,73 @@
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant title="default">
+      <Tree
+        :options="{
+          showIndentationGuides: state.showIndentationGuides,
+          rowHeight: state.rowHeight,
+          indentWidth: state.indentWidth,
+        }"
+        nodeKey="name"
+        :node="state.node"
+      />
+    </Variant>
+    <template #controls>
+      <HstCheckbox
+        v-model="state.showIndentationGuides"
+        title="Show Indentation Guides"
+      />
+      <HstText v-model="state.rowHeight" title="Row Height" />
+      <HstText v-model="state.indentWidth" title="Indent Width" />
+    </template>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Tree from './Tree.vue'
+
+const state = reactive({
+  showIndentationGuides: true,
+  rowHeight: '25px',
+  indentWidth: '15px',
+  node: {
+    name: 'guest',
+    label: 'Guest',
+    children: [
+      {
+        name: 'downloads',
+        label: 'Downloads',
+        children: [
+          {
+            name: 'download.zip',
+            label: 'download.zip',
+            children: [
+              {
+                name: 'image.png',
+                label: 'image.png',
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: 'documents',
+        label: 'Documents',
+        children: [
+          {
+            name: 'somefile.txt',
+            label: 'somefile.txt',
+            children: [],
+          },
+          {
+            name: 'somefile.pdf',
+            label: 'somefile.pdf',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+})
+</script>

package/src/components/Tree/Tree.vue

@@ -0,0 +1,124 @@
+<template>
+  <!-- Current Tree Node -->
+  <slot
+    name="node"
+    v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }"
+  >
+    <div
+      class="flex items-center cursor-pointer gap-1"
+      :style="{ height: options.rowHeight }"
+      @click="toggleCollapsed"
+    >
+      <div ref="iconRef">
+        <!-- slot to only override the Icon -->
+        <slot name="icon" v-bind="{ hasChildren, isCollapsed }">
+          <FeatherIcon
+            v-if="hasChildren && !isCollapsed"
+            name="chevron-down"
+            class="h-3.5"
+          />
+          <FeatherIcon
+            v-else-if="hasChildren"
+            name="chevron-right"
+            class="h-3.5"
+          />
+        </slot>
+      </div>
+
+      <!-- slot to only override the label -->
+      <slot name="label" v-bind="{ node, hasChildren, isCollapsed }">
+        <div class="text-base truncate" :class="hasChildren ? '' : 'pl-3.5'">
+          {{ node.label }}
+        </div>
+      </slot>
+    </div>
+  </slot>
+
+  <!-- Recursively render the children -->
+  <div v-if="hasChildren && !isCollapsed" class="flex">
+    <div
+      :style="{ paddingLeft: linePadding }"
+      class="border-r"
+      v-if="options.showIndentationGuides"
+    ></div>
+    <ul class="w-full" :style="{ paddingLeft: options.indentWidth }">
+      <li v-for="child in node.children" :key="child[nodeKey] as string">
+        <Tree :node="child" :nodeKey="nodeKey" :options="options">
+          <!-- Pass the parent slots to the children of current node -->
+          <template #node="{ node, hasChildren, isCollapsed, toggleCollapsed }">
+            <slot
+              name="node"
+              v-bind="{ node, hasChildren, isCollapsed, toggleCollapsed }"
+            />
+          </template>
+
+          <template #icon="{ hasChildren, isCollapsed }">
+            <slot name="icon" v-bind="{ hasChildren, isCollapsed }" />
+          </template>
+
+          <template #label="{ node, hasChildren, isCollapsed }">
+            <slot name="label" v-bind="{ node, hasChildren, isCollapsed }" />
+          </template>
+        </Tree>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import FeatherIcon from '../FeatherIcon.vue'
+import type { TreeNode, TreeOptions } from '../types/Tree'
+
+const props = withDefaults(
+  defineProps<{
+    node: TreeNode
+    nodeKey: string
+    options?: TreeOptions
+  }>(),
+  {
+    options: () => ({
+      rowHeight: '25px',
+      indentWidth: '20px',
+      showIndentationGuides: true,
+    }),
+  },
+)
+
+const slots = defineSlots<{
+  node: {
+    node: TreeNode
+    hasChildren: boolean
+    isCollapsed: boolean
+    toggleCollapsed: (event: MouseEvent) => void
+  }
+  icon: {
+    hasChildren: boolean
+    isCollapsed: boolean
+  }
+  label: {
+    node: TreeNode
+    hasChildren: boolean
+    isCollapsed: boolean
+  }
+}>()
+
+const isCollapsed = ref(true)
+
+const linePadding = ref('')
+
+const hasChildren = computed(() => props.node.children?.length > 0)
+
+const iconRef = ref<HTMLElement | null>(null)
+
+const toggleCollapsed = (event: MouseEvent) => {
+  event.stopPropagation()
+  if (hasChildren.value) isCollapsed.value = !isCollapsed.value
+}
+
+onMounted(() => {
+  if (iconRef.value?.clientWidth)
+    // Set the padding for the LHS line to align with the center of icon
+    linePadding.value = iconRef.value.clientWidth / 2 + 'px'
+})
+</script>

package/src/components/types/Tree.ts

@@ -0,0 +1,12 @@
+export type TreeNode = {
+  label: string
+  children: TreeNode[]
+  // added TreeNode[] due to enforcement that dynamic key types should accommodate all static key types
+  [nodeKey: string]: string | number | TreeNode[]
+}
+
+export type TreeOptions = {
+  rowHeight?: string
+  indentWidth?: string
+  showIndentationGuides?: boolean
+}

package/src/index.js

@@ -42,6 +42,7 @@ export {
   TextEditorContent,
 } from './components/TextEditor'
 export { default as ListView } from './components/ListView/ListView.vue'
+export { default as List } from './components/ListView/ListView.vue'
 export { default as ListHeader } from './components/ListView/ListHeader.vue'
 export { default as ListHeaderItem } from './components/ListView/ListHeaderItem.vue'
 export { default as ListEmptyState } from './components/ListView/ListEmptyState.vue'
@@ -61,6 +62,8 @@ export { default as CommandPaletteItem } from './components/CommandPalette/Comma
 export { default as ListFilter } from './components/ListFilter/ListFilter.vue'
 export { default as Calendar } from './components/Calendar/Calendar.vue'
 export { default as NestedPopover } from './components/ListFilter/NestedPopover.vue'
+export { default as CircularProgressBar } from './components/CircularProgressBar.vue'
+export { default as Tree } from './components/Tree/Tree.vue'
 
 // directives
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'