@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/config/theme.config.ts

@@ -1,250 +0,0 @@
-/**
- * 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/template/src/docs/index.ts

@@ -1,21 +0,0 @@
-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/template/src/docs.scss

@@ -1,403 +0,0 @@
-.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/template/src/index.d.ts

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

package/template/src/index.ts

@@ -1,20 +0,0 @@
-// 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'