@dasidev/dasi-ui 1.0.0

package/src/config/theme.config.ts

@@ -0,0 +1,250 @@
+/**
+ * Theme Configuration
+ * Centralized theme and styling configuration
+ */
+
+export interface ThemeConfig {
+  colors: {
+    primary: string
+    primaryHover: string
+    primaryActive: string
+    secondary?: string
+    accent?: string
+    background: string
+    surface: string
+    text: string
+    textSecondary: string
+    border: string
+    error: string
+    warning: string
+    success: string
+    info: string
+  }
+  darkMode: {
+    enabled: boolean
+    colors: {
+      background: string
+      surface: string
+      text: string
+      textSecondary: string
+      border: string
+    }
+  }
+  typography: {
+    fontFamily: string
+    fontSize: {
+      xs: string
+      sm: string
+      base: string
+      lg: string
+      xl: string
+      '2xl': string
+      '3xl': string
+    }
+    fontWeight: {
+      normal: number
+      medium: number
+      semibold: number
+      bold: number
+    }
+  }
+  spacing: {
+    xs: string
+    sm: string
+    md: string
+    lg: string
+    xl: string
+    '2xl': string
+  }
+  borderRadius: {
+    sm: string
+    md: string
+    lg: string
+    xl: string
+  }
+  shadows: {
+    sm: string
+    md: string
+    lg: string
+    xl: string
+  }
+  animations: {
+    duration: {
+      fast: string
+      normal: string
+      slow: string
+    }
+    easing: {
+      ease: string
+      easeIn: string
+      easeOut: string
+      easeInOut: string
+    }
+  }
+}
+
+export const defaultThemeConfig: ThemeConfig = {
+  colors: {
+    primary: '#2671D9',
+    primaryHover: '#297df0',
+    primaryActive: '#e8f1fb',
+    secondary: '#6c757d',
+    accent: '#e8f1fb',
+    background: '#ffffff',
+    surface: '#f8f9fa',
+    text: '#4D5E80',
+    textSecondary: '#6c757d',
+    border: '#dee2e6',
+    error: '#dc3545',
+    warning: '#ffc107',
+    success: '#28a745',
+    info: '#17a2b8'
+  },
+  darkMode: {
+    enabled: true,
+    colors: {
+      background: '#0a0a0a',
+      surface: '#111111',
+      text: '#cccccc',
+      textSecondary: '#999999',
+      border: '#151515'
+    }
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem'
+    },
+    fontWeight: {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    }
+  },
+  spacing: {
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+    '2xl': '3rem'
+  },
+  borderRadius: {
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem'
+  },
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)'
+  },
+  animations: {
+    duration: {
+      fast: '150ms',
+      normal: '300ms',
+      slow: '500ms'
+    },
+    easing: {
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out'
+    }
+  }
+}
+
+export const useThemeConfig = () => {
+  let themeConfig: ThemeConfig = { ...defaultThemeConfig }
+  
+  const setThemeConfig = (config: Partial<ThemeConfig>) => {
+    themeConfig = { ...themeConfig, ...config }
+  }
+  
+  const getThemeConfig = (): ThemeConfig => {
+    return themeConfig
+  }
+  
+  const getColor = (colorPath: string): string => {
+    const path = colorPath.split('.')
+    let color = themeConfig.colors
+    
+    for (const key of path) {
+      if (key === 'dark' && path.length > 1) {
+        color = themeConfig.darkMode.colors as any
+        continue
+      }
+      color = (color as any)[key]
+      if (!color) return '#000000'
+    }
+    
+    return typeof color === 'string' ? color : '#000000'
+  }
+  
+  const generateCSSVariables = (): Record<string, string> => {
+    const variables: Record<string, string> = {}
+    
+    // Light mode colors
+    Object.entries(themeConfig.colors).forEach(([key, value]) => {
+      variables[`--color-${key}`] = value
+    })
+    
+    // Dark mode colors
+    if (themeConfig.darkMode.enabled) {
+      Object.entries(themeConfig.darkMode.colors).forEach(([key, value]) => {
+        variables[`--color-dark-${key}`] = value
+      })
+    }
+    
+    // Typography
+    variables['--font-family'] = themeConfig.typography.fontFamily
+    Object.entries(themeConfig.typography.fontSize).forEach(([key, value]) => {
+      variables[`--font-size-${key}`] = value
+    })
+    Object.entries(themeConfig.typography.fontWeight).forEach(([key, value]) => {
+      variables[`--font-weight-${key}`] = value.toString()
+    })
+    
+    // Spacing
+    Object.entries(themeConfig.spacing).forEach(([key, value]) => {
+      variables[`--spacing-${key}`] = value
+    })
+    
+    // Border radius
+    Object.entries(themeConfig.borderRadius).forEach(([key, value]) => {
+      variables[`--border-radius-${key}`] = value
+    })
+    
+    // Shadows
+    Object.entries(themeConfig.shadows).forEach(([key, value]) => {
+      variables[`--shadow-${key}`] = value
+    })
+    
+    // Animations
+    Object.entries(themeConfig.animations.duration).forEach(([key, value]) => {
+      variables[`--duration-${key}`] = value
+    })
+    Object.entries(themeConfig.animations.easing).forEach(([key, value]) => {
+      variables[`--easing-${key}`] = value
+    })
+    
+    return variables
+  }
+  
+  return {
+    themeConfig,
+    setThemeConfig,
+    getThemeConfig,
+    getColor,
+    generateCSSVariables
+  }
+}

package/src/docs/index.ts

@@ -0,0 +1,21 @@
+const doscMenu = [
+  {
+    title: 'Panduan Penggunaan',
+    code: 'panduan-penggunaan',
+  },
+  {
+    title: 'Referensi API',
+    code: 'referensi-api',
+    type: 'api',
+  },
+  {
+    title: 'Akses Pengguna',
+    code: 'akses-pengguna',
+  },
+  {
+    title: 'Integrasi Data',
+    code: 'integrasi-data',
+  },
+];
+
+export default doscMenu;

package/src/docs.scss

@@ -0,0 +1,403 @@
+.dasi-docs{
+  // Write css for markdown documenation here...
+  @media print {
+    *,
+    *:before,
+    *:after {
+      background: transparent !important;
+      color: #000 !important;
+      box-shadow: none !important;
+      text-shadow: none !important;
+    }
+  
+    a,
+    a:visited {
+      text-decoration: underline;
+    }
+  
+    a[href]:after {
+      content: " (" attr(href) ")";
+    }
+  
+    abbr[title]:after {
+      content: " (" attr(title) ")";
+    }
+  
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+      content: "";
+    }
+  
+    pre,
+    blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+  
+    thead {
+      display: table-header-group;
+    }
+  
+    tr,
+    img {
+      page-break-inside: avoid;
+    }
+  
+    img {
+      max-width: 100% !important;
+      border-radius: 10px;
+    }
+  
+    p,
+    h2,
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+  
+    h2,
+    h3 {
+      page-break-after: avoid;
+    }
+  }
+  
+  // Inlinde code
+  code {
+    background-color: #f5f5fe;
+    border: #edc1d4 1px solid;
+    padding: 0px 4px 1px;
+    border-radius: 4px;
+    color: #bf125d;
+  }
+  // Block code
+  pre {
+    background-color: #334155;
+    color: #fff;
+    padding: 30px 0.75rem 10px;
+    border-radius: 5px;
+    margin-bottom: 6px;
+    line-height: 1.25;
+    overflow-x: scroll;
+    font-size: 15px;
+    position: relative;
+    &::before{
+      content: "";
+      background-color: #64748b;
+      position: absolute;
+      top: 0; height: 20px;
+      left: 0; right: 0;
+      z-index: 1;
+    }
+    &::after{
+      content: "";
+      background-color: #334155;
+      opacity: .5;
+      position: absolute;
+      width: 9px; height: 9px;
+      border-radius: 50%;
+      top: 6px; left: 10px;
+      z-index: 1;
+    }
+    code{
+      &::before{
+        content: "";
+        background-color: #334155;
+        opacity: .5;
+        position: absolute;
+        width: 9px; height: 9px;
+        border-radius: 50%;
+        top: 6px; left: 23px;
+        z-index: 1;
+      }
+      &::after{
+        content: "";
+        background-color: #334155;
+        opacity: .5;
+        position: absolute;
+        width: 9px; height: 9px;
+        border-radius: 50%;
+        top: 6px; left: 37px;
+        z-index: 1;
+      }
+      background: none;
+      padding: 0;
+      color: inherit;
+      border: none;
+    }
+  }
+
+  hr {
+    height: .375em;
+    border-radius: 50px;
+    background-color: #dedeec;
+    border: none;
+    margin: 1rem 0;
+  }
+
+  ul {
+    padding-left: 20px;
+    margin-bottom: 1.3rem;
+    li{
+      list-style: circle;
+      padding: 2px 0;
+      padding-left: 4px;
+      font-size: 1rem;
+      p{
+        margin: 0;
+      }
+      ul, ol{
+        margin-bottom: 0;
+      }
+    }
+  }
+  ol {
+    padding-left: 30px;
+    margin-bottom: 1.3rem;
+    li{
+      list-style: auto;
+      padding: 2px 0;
+      padding-left: 4px;
+      font-size: 1rem;
+      p{
+        margin: 0;
+      }
+      ul, ol{
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  a,
+  a:visited {
+    color: #3498db;
+  }
+  
+  a:hover,
+  a:focus,
+  a:active {
+    color: #2980b9;
+  }
+  
+  .modest-no-decoration {
+    text-decoration: none;
+  }
+  
+  html {
+    font-size: 12px;
+  }
+  
+  @media screen and (min-width: 32rem) and (max-width: 48rem) {
+    html {
+      font-size: 15px;
+    }
+  }
+  
+  @media screen and (min-width: 48rem) {
+    html {
+      font-size: 16px;
+    }
+  }
+  
+  body {
+    line-height: 1.85;
+  }
+  
+  p,
+  .modest-p {
+    font-size: 1rem;
+    margin-bottom: 1.3rem;
+  }
+  
+  h1,
+  .modest-h1,
+  h2,
+  .modest-h2,
+  h3,
+  .modest-h3,
+  h4,
+  .modest-h4 {
+    margin: 1.414rem 0 .5rem;
+    font-weight: inherit;
+    line-height: 1.42;
+  }
+  
+  h1,
+  .modest-h1 {
+    margin-top: 0;
+    font-size: 2.6rem;
+  }
+  
+  h2,
+  .modest-h2 {
+    font-size: 1.8rem;
+  }
+  
+  h3,
+  .modest-h3 {
+    font-size: 1.4rem;
+  }
+  
+  h4,
+  .modest-h4 {
+    font-size: 1.2rem;
+  }
+  
+  h5,
+  .modest-h5 {
+    font-size: 1rem;
+  }
+  
+  h6,
+  .modest-h6 {
+    font-size: .88rem;
+  }
+  
+  small,
+  .modest-small {
+    font-size: .707em;
+  }
+  
+  /* https://github.com/mrmrs/fluidity */
+  
+  img,
+  canvas,
+  iframe,
+  video,
+  svg,
+  select,
+  textarea {
+    max-width: 100%;
+  }
+  
+  html {
+    font-size: 18px;
+    max-width: 100%;
+  }
+  
+  body {
+    color: #444;
+    font-weight: 300;
+    margin: 0 auto;
+    max-width: 48rem;
+    line-height: 1.45;
+    padding: .25rem;
+  }
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+  
+  h2{
+    margin-top: 30px;
+  }
+  h3 {
+    margin-top: 20px;
+  }
+
+  b, strong{
+    font-weight: 600;
+  }
+  
+  blockquote {
+    border-left: 8px solid #54aeff66;
+    background-color: #ddf4ff;
+    color: #064e8d;
+    border-radius: 5px;
+    padding: 12px 1rem;
+    padding-left: 32px;
+    margin-bottom: 6px;
+    font-size: 1.25rem;
+    position: relative;
+    &:before{
+      content: "\"";
+      font-size: 40px;
+      color: #54aeff66;
+      position: absolute;
+      left: 8px; top: 0;
+    }
+    p{
+      font-size: inherit;
+      margin-bottom: 0;
+    }
+  }
+
+  table {
+    width: 100%;
+    margin-bottom: 6px;
+    text-align: left;
+    border-collapse: separate;
+    border-spacing: 0;
+    th, td{
+      border: rgb(156 163 175) 1px solid;
+      border-width: 1px 1px 0 0;
+      padding: 6px 12px;
+      font-size: 1rem;
+      vertical-align: top;
+    }
+    th {
+      background-color: #f5f5fe;
+      &:first-child{
+        border-radius: 5px 0 0 0;
+        border-left-width: 1px;
+      }
+      &:last-child{
+        border-radius: 0 5px 0 0;
+        border-right-width: 1px;
+      }
+    }
+    td {
+      &:first-child{
+        border-left-width: 1px;
+      }
+      &:last-child{
+        border-right-width: 1px;
+      }
+    }
+    tr:last-child{
+      td{
+        border-bottom-width: 1px;
+        &:first-child{
+          border-radius: 0 0 0 5px;
+        }
+        &:last-child{
+          border-radius: 0 0 5px 0;
+        }  
+      }
+    }
+  }
+}
+
+.dasi-api-doc{
+  table {
+    width: 100%;
+    text-align: left;
+    border-collapse: separate;
+    border-spacing: 0;
+    th, td{
+      padding: 8px 16px;
+      font-size: 14px;
+      vertical-align: top;
+    }
+    th {
+      font-weight: 500;
+      border-bottom: #ddd 2px solid;
+    }
+    &.table-responses{
+      td{
+        padding-top: 12px;
+      }
+      tbody{
+        tr:first-child{
+          td{
+            border-top: none;
+          }
+        }
+      }
+    }
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type {defineComponent} from 'vue'
+  const component: ReturnType<typeof defineComponent>;
+  export default component
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+// Main App Component
+export { default as DasiApp } from './App.vue'
+
+// Core Components
+export { default as PageActivity } from './components/pages/PageActivity.vue'
+export { default as DashboardDataTable } from './components/tables/DashboardDataTable.vue'
+export { default as DataTableCell } from './components/tables/DataTableCell.vue'
+
+// UI Components
+export { default as BaseSelector } from './components/selector/BaseSelector.vue'
+export { default as DateSelectorElement } from './vueform/elements/DateSelectorElement.vue'
+
+// Layout Components
+export { default as Header } from './components/pages/Header.vue'
+
+// Composables
+export { useAppConfig } from './composables/useAppConfig'
+
+// Styles
+import './main.scss'