@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/docs/components/Textarea.md

@@ -0,0 +1,66 @@
+# Textarea
+A multi-line text input component with auto-resize and validation support.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String/Number | `undefined` | The input value. Supports `v-model` |
+| placeholder | String | `undefined` | Placeholder text |
+| readonly | Any | `undefined` | Makes the textarea read-only |
+| rows | String | `undefined` | Number of visible text rows |
+| maxlength | Any | `undefined` | Maximum character length |
+| state | Number | `1` | Input state: `1` (normal), `-1` (disabled), `-2` (error) |
+| variant | String | `''` | Visual variant |
+| size | String | `''` | Size variant |
+| errors | String/Array | `''` | Validation error messages |
+| align | String | `undefined` | Text alignment |
+| customClass | String | `undefined` | Override default class |
+| itemClass | String | `undefined` | Additional class for textarea element |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on input, enables `v-model` |
+| change | String | Emitted when value changes |
+| blur | - | Emitted when textarea loses focus |
+| submit | - | Emitted on form submit |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| focus | - | Focuses the textarea |
+| select | - | Selects all text in textarea |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| start | Content before the textarea |
+| end | Content after the textarea |
+
+## Samples
+
+### Basic
+```vue
+<Textarea v-model="description" placeholder="Enter description..." />
+```
+
+### With rows
+```vue
+<Textarea v-model="content" :rows="5" />
+```
+
+### With maxlength
+```vue
+<Textarea v-model="bio" :maxlength="200" />
+```
+
+### Error state
+```vue
+<Textarea v-model="comment" :state="-2" :errors="['Comment is required']" />
+```
+
+### Readonly
+```vue
+<Textarea v-model="readonlyText" readonly />
+```
+

package/docs/components/Textbox.md

@@ -0,0 +1,97 @@
+# Textbox
+A versatile text input component with support for various types, formatting, and validation.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | Any | `undefined` | The input value. Supports `v-model` |
+| value | Any | `undefined` | Alternative value prop |
+| type | String | `undefined` | Input type: `'text'`, `'tel'`, `'password'`, `'number'` |
+| placeholder | String | `undefined` | Placeholder text |
+| readonly | Any | `undefined` | Makes the input read-only |
+| disabled | Any | `undefined` | Disables the input |
+| maxlength | String/Number | `255` | Maximum character length |
+| clearable | Boolean/String/Number | `undefined` | Show clear button |
+| state | Number | `1` | Input state: `1` (normal), `-1` (disabled), `-2` (error) |
+| variant | String | `''` | Visual variant |
+| size | String | `''` | Size variant: `'sm'` |
+| align | String | `undefined` | Text alignment |
+| itemClass | String | `undefined` | Custom class for input element |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on input, enables `v-model` |
+| input | Event | Raw input event |
+| clear | - | Emitted when clear button is clicked |
+| keyup | Event | Keyboard keyup event |
+| blur | Event | Emitted on blur |
+| input-click | - | Emitted when input is clicked |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| focus | - | Focuses the input |
+| select | - | Selects all text in input |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| start | Content before the input |
+| end | Content after the input |
+
+## Samples
+
+### Basic
+```vue
+<Textbox v-model="username" placeholder="Enter username" />
+```
+
+### Password input
+```vue
+<Textbox v-model="password" type="password" placeholder="Enter password" />
+```
+
+### Number input with formatting
+```vue
+<Textbox v-model="price" type="number" />
+<!-- Displays formatted number, edits raw value -->
+```
+
+### Phone number
+```vue
+<Textbox v-model="phone" type="tel" placeholder="+62..." />
+```
+
+### With clear button
+```vue
+<Textbox v-model="search" clearable @clear="search = ''" />
+```
+
+### Small size
+```vue
+<Textbox v-model="code" size="sm" />
+```
+
+### With slots
+```vue
+<Textbox v-model="amount">
+  <template #start>
+    <span class="px-2">Rp</span>
+  </template>
+  <template #end>
+    <span class="px-2">.00</span>
+  </template>
+</Textbox>
+```
+
+### Error state
+```vue
+<Textbox v-model="email" :state="-2" />
+```
+
+### Readonly
+```vue
+<Textbox v-model="readonlyValue" readonly />
+```
+

package/docs/components/Timepicker.md

@@ -0,0 +1,62 @@
+# Timepicker
+Time selection component with hour, minute, and optional second dropdowns.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String | `'00:00'` | Time value in `HH:mm` or `HH:mm:ss` format. Supports `v-model` |
+| readonly | Boolean/String | `undefined` | Disables interaction |
+| disabled | Boolean/String | `undefined` | Disables interaction |
+| minuteStep | Number/String | `1` | Minute interval (1-30). E.g. `15` shows `00, 15, 30, 45` |
+| secondStep | Number/String | `1` | Second interval (1-30) |
+| showSeconds | Boolean/String | `false` | Show seconds dropdown |
+| min | String | `''` | Minimum time constraint, e.g. `'08:00'` |
+| max | String | `''` | Maximum time constraint, e.g. `'17:00'` |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on change, enables `v-model` |
+| change | String | Emitted on change with the new time value |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| start | Content before the hour dropdown |
+| end | Content after the last dropdown |
+
+## Samples
+
+### Basic
+```vue
+<Timepicker v-model="time" />
+```
+
+### With minute step
+```vue
+<Timepicker v-model="time" :minute-step="15" />
+```
+
+### With seconds
+```vue
+<Timepicker v-model="time" show-seconds />
+```
+
+### With time constraints
+```vue
+<Timepicker v-model="time" min="08:00" max="17:00" />
+```
+
+### Disabled
+```vue
+<Timepicker v-model="time" disabled />
+```
+
+### With slot content
+```vue
+<Timepicker v-model="time">
+  <template #start>
+    <label class="p-2">Time</label>
+  </template>
+</Timepicker>
+```

package/docs/components/Toast.md

@@ -0,0 +1,59 @@
+# Toast
+A toast notification component that appears at the top of the screen.
+
+## Props
+None (controlled via methods)
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| open | `{ text?, message?, errors? }` | Shows the toast notification |
+| close | - | Closes the toast |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Custom toast content |
+
+## Samples
+
+### Basic usage
+```vue
+<template>
+  <Toast ref="toast" />
+  <Button @click="showToast">Show Toast</Button>
+</template>
+
+<script setup>
+const toast = ref(null)
+
+function showToast() {
+  toast.value.open({
+    text: 'Operation completed successfully!'
+  })
+}
+</script>
+```
+
+### Error toast
+```vue
+<script setup>
+function showError() {
+  toast.value.open({
+    errors: { email: 'Invalid email address' }
+  })
+}
+</script>
+```
+
+### With message
+```vue
+<script setup>
+function showMessage() {
+  toast.value.open({
+    message: 'Your changes have been saved.'
+  })
+}
+</script>
+```
+

package/docs/components/Uploader.md

@@ -0,0 +1,51 @@
+# Uploader
+A file upload component that triggers file selection on click.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| accept | Any | `undefined` | Accepted file types (e.g., `'image/*'`, `'.pdf'`) |
+| multiple | Any | `undefined` | Allow multiple file selection |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| change | Array | Emitted with array of selected File objects |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Clickable content that triggers file picker |
+
+## Samples
+
+### Basic
+```vue
+<Uploader @change="handleFiles">
+  <Button>Select Files</Button>
+</Uploader>
+```
+
+### Image upload
+```vue
+<Uploader accept="image/*" @change="handleImages">
+  <div class="upload-zone">
+    Click to upload images
+  </div>
+</Uploader>
+```
+
+### Multiple files
+```vue
+<Uploader multiple @change="handleMultiple">
+  <Button>Upload Multiple</Button>
+</Uploader>
+```
+
+### Specific file types
+```vue
+<Uploader accept=".pdf,.doc,.docx" @change="handleDocuments">
+  <Button>Upload Documents</Button>
+</Uploader>
+```
+

package/docs/components/Video.md

@@ -0,0 +1,54 @@
+# Video
+A video player component with play controls and edit functionality.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| src | Any | `undefined` | Video source URL or File object |
+| editable | Boolean/String | `false` | Enable video upload functionality |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| click | `(event, instance)` | Emitted when video area is clicked |
+| change | `(base64, file)` | Emitted when video is changed (editable mode) |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| edit | - | Opens file picker for video selection |
+| play | - | Starts video playback |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| empty | `{ instance }` | Content when no video is set |
+
+## Samples
+
+### Basic
+```vue
+<Video src="/videos/intro.mp4" />
+```
+
+### Editable video
+```vue
+<Video :src="videoSrc" editable @change="onVideoChange" />
+```
+
+### With File object
+```vue
+<Video :src="selectedFile" />
+```
+
+### Custom empty state
+```vue
+<Video :src="videoUrl">
+  <template #empty="{ instance }">
+    <div class="placeholder" @click="instance.edit()">
+      Click to add video
+    </div>
+  </template>
+</Video>
+```
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.2.250801010",
+  "version": "0.2.250801012",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -48,7 +48,67 @@
     "./web": {
       "require": "./src/utils/web.js",
       "import": "./src/utils/web.mjs"
-    }
+    },
+    "./docs/components/404": "./docs/components/404.md",
+    "./docs/components/AccountIcon": "./docs/components/AccountIcon.md",
+    "./docs/components/Ahref": "./docs/components/Ahref.md",
+    "./docs/components/Alert": "./docs/components/Alert.md",
+    "./docs/components/ArrayList": "./docs/components/ArrayList.md",
+    "./docs/components/Article": "./docs/components/Article.md",
+    "./docs/components/Block": "./docs/components/Block.md",
+    "./docs/components/Box": "./docs/components/Box.md",
+    "./docs/components/Button": "./docs/components/Button.md",
+    "./docs/components/Card": "./docs/components/Card.md",
+    "./docs/components/Carousel": "./docs/components/Carousel.md",
+    "./docs/components/Cart": "./docs/components/Cart.md",
+    "./docs/components/CartIcon": "./docs/components/CartIcon.md",
+    "./docs/components/Chart": "./docs/components/Chart.md",
+    "./docs/components/ChartBar": "./docs/components/ChartBar.md",
+    "./docs/components/ChatTyping": "./docs/components/ChatTyping.md",
+    "./docs/components/Checkbox": "./docs/components/Checkbox.md",
+    "./docs/components/Checkout": "./docs/components/Checkout.md",
+    "./docs/components/CheckoutDelivery": "./docs/components/CheckoutDelivery.md",
+    "./docs/components/CodeEditor": "./docs/components/CodeEditor.md",
+    "./docs/components/CollapsiblePanel": "./docs/components/CollapsiblePanel.md",
+    "./docs/components/ColorPicker": "./docs/components/ColorPicker.md",
+    "./docs/components/ColorPicker2": "./docs/components/ColorPicker2.md",
+    "./docs/components/ColorPicker3": "./docs/components/ColorPicker3.md",
+    "./docs/components/Confirm": "./docs/components/Confirm.md",
+    "./docs/components/ContextMenu": "./docs/components/ContextMenu.md",
+    "./docs/components/ContextMenuItem": "./docs/components/ContextMenuItem.md",
+    "./docs/components/CopyToClipboard": "./docs/components/CopyToClipboard.md",
+    "./docs/components/Countdown": "./docs/components/Countdown.md",
+    "./docs/components/DataList": "./docs/components/DataList.md",
+    "./docs/components/Datepicker": "./docs/components/Datepicker.md",
+    "./docs/components/Datetimepicker": "./docs/components/Datetimepicker.md",
+    "./docs/components/DayTimeRange": "./docs/components/DayTimeRange.md",
+    "./docs/components/Dropdown": "./docs/components/Dropdown.md",
+    "./docs/components/ErrorText": "./docs/components/ErrorText.md",
+    "./docs/components/FBLogin": "./docs/components/FBLogin.md",
+    "./docs/components/Flex": "./docs/components/Flex.md",
+    "./docs/components/GHeatMaps": "./docs/components/GHeatMaps.md",
+    "./docs/components/Gmaps": "./docs/components/Gmaps.md",
+    "./docs/components/GmapsDirection": "./docs/components/GmapsDirection.md",
+    "./docs/components/Grid": "./docs/components/Grid.md",
+    "./docs/components/GSignIn": "./docs/components/GSignIn.md",
+    "./docs/components/HTMLEditor": "./docs/components/HTMLEditor.md",
+    "./docs/components/IconMenu": "./docs/components/IconMenu.md",
+    "./docs/components/Image": "./docs/components/Image.md",
+    "./docs/components/Link": "./docs/components/Link.md",
+    "./docs/components/MultiDropdown": "./docs/components/MultiDropdown.md",
+    "./docs/components/Radio": "./docs/components/Radio.md",
+    "./docs/components/Slider": "./docs/components/Slider.md",
+    "./docs/components/Switch": "./docs/components/Switch.md",
+    "./docs/components/Table": "./docs/components/Table.md",
+    "./docs/components/Tabs": "./docs/components/Tabs.md",
+    "./docs/components/Text": "./docs/components/Text.md",
+    "./docs/components/Textarea": "./docs/components/Textarea.md",
+    "./docs/components/Textbox": "./docs/components/Textbox.md",
+    "./docs/components/Timepicker": "./docs/components/Timepicker.md",
+    "./docs/components/Toast": "./docs/components/Toast.md",
+    "./docs/components/TreeView": "./docs/components/TreeView.md",
+    "./docs/components/Uploader": "./docs/components/Uploader.md",
+    "./docs/components/Video": "./docs/components/Video.md"
   },
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.8",
@@ -93,6 +153,9 @@
   ],
   "author": "mixd.id",
   "license": "ISC",
+  "files": [
+    "docs/components"
+  ],
   "bugs": {
     "url": "https://github.com/mixd-id/web-scaffold/issues"
   },

package/docs/components/Dashboard.md

@@ -1,56 +0,0 @@
-# Dashboard
-Dashboard components
-
-## Configs
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| params | Object | {} | | Dashboard parameters |
-| params.presetUid | String | "" | | Preset unique identifier |
-
-## Samples
-```json
-{
-  "params": {
-    "presetUid": "abc",
-    "viewUid": "def"
-  },
-  
-  "presets": [
-
-    {
-      "name": "Preset Name",
-      
-      "views": [
-        {
-          "type": "Grid",
-          "uid": ":uid"
-        }
-      ],
-      
-      "datasource": {
-        
-        ":uid": {
-          "uid": ":uid",
-          "datasourceUid": "234",
-          "filters": [],
-          "sorts": [],
-          "groups": [],
-          "pivot": []
-        },
-        
-      }
-      
-    }
-    
-  ]
-}
-```
-
-
-## Sub Components
-
-### Dashboard Configs
-Dashboard configuration panel
-
-### Dashboard Component Selector
-Component selector for adding component to preset views

package/docs/components/Header2.md

@@ -1,16 +0,0 @@
-# Header 2
-
-### Properties
-| Name                     | Type   | Default | Description                |
-|--------------------------|--------|---------|----------------------------|
-| `logo`                   | Array  | []      | Responsive Array of Object |
-| `logo[].url`             | String |         | Logo url                   |
-| `icons`                  | Array  | {}      | Responsive Array of Object |
-| `icons[].items`          | Array  | {}      | Array of Object            |
-| `icons[].items[].icon`   | String |         | (required) icon value      |
-| `icons[].items[].target` | String |    | (required) target value    |
-| `icons[].items[].text`   | String | route   | route, search              |
-| `menu[].items[].icon`    | String |      | svg, image                 |
-| `menu[].items[].text`    | String |      |                  |
-| `menu[].items[].target`  | String |      |               |
-| `menu[].items[].items`   | Array  |      |            |

package/log.txt

@@ -1,7 +0,0 @@
-[2025-06-28 16:30:51]
-POST https://198.168.4.239/ksapisvr
---
-{"api_jsonkolnss":[{"Request":"HASIL","attempt":"0","noBukti":"KSSOE312506000008745","noHP":"085339156956","linkFoto":"https://www.kliknss.co.id/images/kols/097da1af5ef3f112e6ce0d771bdcbeda.jpg","lat":"-10.0409983","long":"124.5253983","jamFoto":"14:02:09","statusKunjungan":"3","lokasiKunjungan":"05","bertemuDengan":"org tua","hubDenganKonsumen":"KELUARGA","konsBayarTarik":"1","tanggalJanjiBayar":"","tanggalKunjunganUlang":"","penyebabKonsTidakBayar":"","historisKons":"","noHPKons":"08552364562","alamatRumahSkr":"desa takarii","keberadaanKonsumen":"01","pekerjaanSkr":"AG","subPekerjaan":"63","unitBisaDiFoto":"Y","keberadaanUnit":"11","klasifikasiKons":"999","layakTdkLayak":"","latMulai":"-10.0408867","lonMulai":"124.5252633","latSampai":"-10.0409114","lonSampai":"124.5252886","latSelesai":"-10.0409983","lonSelesai":"124.5253983","jamMulai":"13:58:54","jamSampai":"13:59:11","jamSelesai":"13:59:14","linkFotoBerkas":"https://www.kliknss.co.id/images/kols/9dbec61757412e358e9a68013aa80f25.jpg","jamKirim":"2025-06-28 16:51:04.695692","tempatDikunjungi":"rmh org tya","hariLuang":"Senin","jamLuang":"10:00 - 12:00","kodePelacakan":"","latFotoPelacakan":"","longFotoPelacakan":"","jamFotoPelacakan":"","provPelacakan":"","kotaPelacakan":"","kecPelacakan":"","kelPelacakan":"","kodePosPelacakan":"","alamatPelacakan":"","provPemegangUnit":"","kotaPemegangUnit":"","kecPemegangUnit":"","kelPemegangUnit":"","kodePosPemegangUnit":"","alamatPemegangUnit":"","hubPemegangUnit":"","hubPemegangUnitLainnya":"","namaPemegangUnit":"","ketTidakTerlacak":"","Suspect":"TIDAK","KetKunjKolvsAlmtagih":"TIDAK SESUAI","JrkKunjKolvsAlmtagih":"29652.31661401902","KetKunjKolvsResurvey":"TIDAK SESUAI","JrkKunjKolvsResurvey":"29652.31661401902","KetKunjKolvsSurvey":"TIDAK SESUAI","JrkKunjKolvsSurvey":"32674.530270079635","KetKunjKolvsTmptKerja":"TIDAK SESUAI","JrkKunjKolvsTmptKerja":"32674.530270079635","KetKunjKolvsKelSurvey":"TIDAK SESUAI","JrkKunjKolvsKelSurvey":"52918.18337137214"}]}
-
-E================ t= 61ms
-{"status":-1,"message":"ap_rdjsn gagal, response=master label  di program tidak ditemukan/tidak urut di jawaban server","data":"ap_rdjsn gagal, response=master label  di program tidak ditemukan/tidak urut di jawaban server  "}

package/src/components/404.vue

@@ -1,61 +0,0 @@
-<template>
-	<div :class="$style.el">
-
-    <div>
-      <h1>{{ title }}</h1>
-      <p>{{ description }}</p>
-    </div>
-
-    <slot>
-      <component v-if="items?.length > 0"
-                 v-for="item in items"
-                 :is="item.type"
-                 :key="item.key"
-                 :="item" />
-
-      <router-link v-else :to="{ path:'/' }" class="text-primary">
-        Back to Home
-      </router-link>
-    </slot>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-
-  props: {
-
-    description: {
-      type: String,
-      default: 'The page you are looking for does not exist.'
-    },
-
-    title: {
-      type: String,
-      default: 'Page Not Found'
-    },
-
-    items: Array
-
-  },
-
-  methods: {
-
-
-  }
-
-}
-
-</script>
-
-<style module>
-
-.el{
-  @apply w-full max-w-[600px] mx-auto;
-  @apply flex flex-col gap-8 items-center justify-center;
-  @apply min-h-[60vh]
-}
-
-</style>

package/src/components/AccountIcon.vue

@@ -1,19 +0,0 @@
-<template>
-	<button type="button">
-
-  </button>
-</template>
-
-<script setup>
-
-
-
-</script>
-
-<style module>
-
-.comp{
-
-}
-
-</style>