fit2cloud-ui-plus 0.0.1-beta.0

package/src/hooks/use-locale/index.ts

@@ -0,0 +1,47 @@
+import { computed, isRef, ref, unref } from 'vue'
+import { get } from 'lodash-unified'
+import Chinese from '@/locale/lang/zh-cn'
+import { useGlobalConfig } from '../use-global-config'
+import type { MaybeRef } from '@vueuse/core'
+import type { Ref } from 'vue'
+import type { Language } from '@/locale'
+
+export type TranslatorOption = Record<string, string | number>
+export type Translator = (path: string, option?: TranslatorOption) => string
+export type LocaleContext = {
+  locale: Ref<Language>
+  lang: Ref<string>
+  t: Translator
+}
+
+export const buildTranslator =
+  (locale: MaybeRef<Language>): Translator =>
+  (path, option) =>
+    translate(path, option, unref(locale))
+
+export const translate = (
+  path: string,
+  option: undefined | TranslatorOption,
+  locale: Language
+): string =>
+  (get(locale, path, path) as string).replace(
+    /\{(\w+)\}/g,
+    (_, key) => `${option?.[key] ?? `{${key}}`}`
+  )
+
+export const buildLocaleContext = (
+  locale: MaybeRef<Language>
+): LocaleContext => {
+  const lang = computed(() => unref(locale).name)
+  const localeRef = isRef(locale) ? locale : ref(locale)
+  return {
+    lang,
+    locale: localeRef,
+    t: buildTranslator(locale),
+  }
+}
+
+export const useLocale = () => {
+  const locale = useGlobalConfig('locale')
+  return buildLocaleContext(computed(() => locale.value || Chinese))
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+import PackageJSON from "../package.json"
+
+import type { App } from 'vue'
+const components = import.meta.globEager('@/components/*/index.ts');
+
+const install = (app: App): void => {
+  Object.keys(components).forEach(key => {
+    let component = components[key].default;
+    app.use(component)
+  })
+}
+
+const plugin = {
+  name: "Fit2CloudUIPlus",
+  version: PackageJSON.version,
+  install,
+}
+
+export default plugin

package/src/locale/index.ts

@@ -0,0 +1,12 @@
+export { default as en } from './lang/en'
+export { default as zhCn } from './lang/zh-cn'
+export { default as zhTw } from './lang/zh-tw'
+
+export type TranslatePair = {
+  [key: string]: string | string[] | TranslatePair
+}
+
+export type Language = {
+  name: string
+  el: TranslatePair
+}

package/src/locale/lang/en.ts

@@ -0,0 +1,58 @@
+export default {
+  name: 'en',
+  fu: {
+    filter_bar: {
+      filter: "Filter",
+      results: "Items",
+      clear: "Clear",
+      drawer_title: "Filter",
+      cancel: "Cancel",
+      search: "Search",
+      select_all: "Select All",
+      more: "More"
+    },
+    search_bar: {
+      search: "Search",
+      adv_search: "Advanced Search",
+      ok: "OK",
+      cancel: "Cancel",
+      please_select: "Please select",
+      please_input: "Please input",
+      like: "Contains",
+      not_like: "not included",
+      in: "belongs to",
+      not_in: "Does not belong",
+      gt: "Greater Than",
+      ge: "Greater than or equal",
+      lt: "Less than",
+      le: "Less than or equal to",
+      eq: "equal to",
+      ne: "not equal to",
+      between: "Between",
+      select_date: 'Select date',
+      start_date: 'Start date',
+      end_date: 'End date',
+      select_date_time: 'Select date and time',
+      start_date_time: 'Start date and time',
+      end_date_time: 'End date and time',
+      range_separator: "to",
+      data_time_error: "The start date cannot be greater than the end date",
+      clean: "Clean",
+      refresh: "Refresh"
+    },
+    table: {
+      ok: "OK",
+      reset: "Reset",
+      custom_table_fields: "Custom table fields",
+      custom_table_fields_desc: "Fixed field is unselectable, others can be checked and dragged",
+      custom_table_rows: "Table rows",
+      more: "More"
+    },
+    steps: {
+      cancel: "Cancel",
+      next: "Next",
+      prev: "Prev",
+      finish: "OK",
+    }
+  }
+}

package/src/locale/lang/zh-cn.ts

@@ -0,0 +1,58 @@
+export default {
+  name: 'zh-cn',
+  fu: {
+    filter_bar: {
+      filter: "筛选",
+      results: "个结果",
+      clear: "清空条件",
+      drawer_title: "筛选条件",
+      cancel: "取消",
+      search: "查询",
+      select_all: "全选",
+      more: "更多"
+    },
+    search_bar: {
+      search: "搜索",
+      adv_search: "高级搜索",
+      ok: "确定",
+      cancel: "取消",
+      please_select: "请选择",
+      please_input: "请输入",
+      like: "包含",
+      not_like: "不包含",
+      in: "属于",
+      not_in: "不属于",
+      gt: "大于",
+      ge: "大于等于",
+      lt: "小于",
+      le: "小于等于",
+      eq: "等于",
+      ne: "不等于",
+      between: "之间",
+      select_date: '选择日期',
+      start_date: '开始日期',
+      end_date: '结束日期',
+      select_date_time: '选择日期时间',
+      start_date_time: '开始日期时间',
+      end_date_time: '结束日期时间',
+      range_separator: "至",
+      data_time_error: "开始日期不能大于结束日期",
+      clean: "清空",
+      refresh: "刷新",
+    },
+    table: {
+      ok: "确定",
+      reset: "重置",
+      custom_table_fields: "自定义表格字段",
+      custom_table_fields_desc: "固定字段不在选择范围，可拖拽自定义顺序",
+      custom_table_rows: "选项列",
+      more: "更多"
+    },
+    steps: {
+      cancel: "取消",
+      next: "下一步",
+      prev: "上一步",
+      finish: "完成",
+    }
+  }
+}

package/src/locale/lang/zh-tw.ts

@@ -0,0 +1,58 @@
+export default {
+  name: 'zh-tw',
+  fu: {
+    filter_bar: {
+      filter: "篩選",
+      results: "個結果",
+      clear: "清空條件",
+      drawer_title: "篩選條件",
+      cancel: "取消",
+      search: "查詢",
+      select_all: "全選",
+      more: "更多"
+    },
+    search_bar: {
+      search: "搜索",
+      adv_search: "高級搜索",
+      ok: "確定",
+      cancel: "取消",
+      please_select: "請選擇",
+      please_input: "請輸入",
+      like: "包含",
+      not_like: "不包含",
+      in: "屬於",
+      not_in: "不屬於",
+      gt: "大於",
+      ge: "大於等於",
+      lt: "小於",
+      le: "小於等於",
+      eq: "等於",
+      ne: "不等於",
+      between: "之間",
+      select_date: '選擇日期',
+      start_date: '開始日期',
+      end_date: '結束日期',
+      select_date_time: '選擇日期時間',
+      start_date_time: '開始日期時間',
+      end_date_time: '結束日期時間',
+      range_separator: "至",
+      data_time_error: "開始日期不能大於結束日期",
+      clean: "清空",
+      refresh: "刷新",
+    },
+    table: {
+      ok: "確定",
+      reset: "重置",
+      custom_table_fields: "自定義表格字段",
+      custom_table_fields_desc: "固定欄位不在選擇範圍，可拖拽自定義順序",
+      custom_table_rows: "選項列",
+      more: "更多"
+    },
+    steps: {
+      cancel: "取消",
+      next: "下一步",
+      prev: "上一步",
+      finish: "完成",
+    }
+  }
+}

package/src/styles/common/config.scss

@@ -0,0 +1,5 @@
+$namespace: 'fu' !default;
+$common-separator: '-';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/src/styles/common/function.scss

@@ -0,0 +1,81 @@
+@use 'config';
+
+// BEM support Func
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+  $name: config.$namespace + config.$common-separator + $block;
+
+  @if $element != '' {
+    $name: $name + config.$element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $name: $name + config.$modifier-separator + $modifier;
+  }
+
+  // @debug $name;
+  @return $name;
+}

package/src/styles/common/mixins.scss

@@ -0,0 +1,85 @@
+@use 'function' as *;
+@use 'variables' as *;
+// forward mixins
+@forward 'config';
+@forward 'function';
+@use 'config' as *;
+
+// BEM
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content
+  }
+}
+
+@mixin flex-row($justify: flex-start, $align: stretch) {
+  display: flex;
+  @if $justify != flex-start {
+    justify-content: $justify;
+  }
+  @if $align != stretch {
+    align-items: $align;
+  }
+}
+
+@mixin active-scale($scale:0.95) {
+  &:active {
+    transform: scale($scale);
+  }
+}
+

package/src/styles/common/variables.scss

@@ -0,0 +1,28 @@
+
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #004A71,
+    ),
+  ),
+  $table: (
+    'border-color' : rgba(31, 35, 41, 0.15),
+    'header-text-color': '#646A73',
+    'text-color': '#1F2329',
+
+  )
+);
+
+// fit2cloud ui variables
+
+$filter-color: #646A73 !default;
+$filter-drawer-color: #646A73 !default;
+$filter-condition-color: #0C296E !default;
+$filter-condition-bgColor: rgba(51, 112, 255, 0.1) !default;
+$filter-option-bgColor:  #F5F6F7 !default;
+$filter-scroll-bgColor:  rgba(31, 35, 41, 0.1) !default;
+
+// $fu-search-bar-width: 100% !default;
+// $fu-search-bar-height: 48px !default;
+// $fu-search-bar-condition-color: #424242 !default;
+// $fu-search-bar-condition-bgColor: #E6E6E6 !default;

package/src/styles/components/filter-bar.scss

@@ -0,0 +1,227 @@
+@use "../common/mixins.scss" as *;
+@use "../common/variables.scss" as *;
+
+@include b(filter-bar) {
+  border-radius: 4px;
+  @include e(top) {
+    display: flex;
+    .top_left {
+      width: 50%;
+      display: flex;
+    }
+
+    .top_right {
+      width: 50%;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+  }
+}
+
+@include b(search-input) {
+  width: 240px;
+  margin-right: 10px;
+  .el-input__prefix, .el-input__suffix {
+    .el-input__icon {
+      color: $filter-color;
+      font-size: 14px
+    }
+  }
+
+  .el-icon-circle-close:before {
+    content: "\e79d"
+  }
+}
+
+@include b(filter) {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+
+  @include e(result) {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    white-space: nowrap;
+  }
+
+  @include e(split) {
+    background-color: $filter-color;
+    height: 16px;
+    width: 1px;
+    margin: 2px 8px;
+  }
+  @include e(scroll) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    cursor: pointer;
+    margin: 0 2px;
+
+    &:hover {
+      background: $filter-scroll-bgColor;
+      border-radius: 4px;
+    }
+
+    &:active {
+      transform: scale(0.9)
+    }
+  }
+  @include e(clear) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    line-height: 22px;
+    height: 22px;
+    min-width: 76px;
+    max-width: 76px;
+    color: $filter-color;
+    cursor: pointer;
+    margin-left: 6px;
+  }
+
+  @include e(drawer) {
+    .el-drawer__header {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      height: 56px;
+      padding: 16px 24px;
+      margin-bottom: 0;
+      border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+      box-sizing: border-box;
+    }
+
+    .drawer-body {
+      position: absolute;
+      top: 56px;
+      bottom: 72px;
+      width: 100%;
+      padding: 12px 24px;
+      overflow-y: auto;
+    }
+
+    .drawer-footer {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 72px;
+      padding: 0 24px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+}
+
+@include b(filter-conditions) {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    height: 0;
+  }
+
+  @include e(item) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1px 6px;
+    box-sizing: border-box;
+    height: 24px;
+    background-color: $filter-condition-bgColor;
+    border-radius: 2px;
+    color: $filter-condition-color;
+
+    & + & {
+      margin-left: 8px;
+    }
+
+    .condition-text {
+      font-size: 14px;
+      line-height: 22px;
+      height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      max-width: 254px;
+      margin-right: 6px;
+    }
+  }
+}
+
+@include b(filter-component) {
+  display: flex;
+  min-height: 46px;
+
+  @include e(label) {
+    font-size: 14px;
+    line-height: 22px;
+    min-width: 122px;
+    margin: 12px 0;
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+}
+
+@include b(filter-component-popover) {
+  &.el-popover.el-popper {
+    display: flex;
+    align-items: center;
+    box-shadow: none;
+    border: none;
+    padding: 0;
+    width: 240px;
+
+    .el-select {
+      width: 100%;
+    }
+  }
+}
+
+@include b(filter-option) {
+  display: flex;
+  align-items: center;
+  padding: 1px 6px;
+  font-size: 14px;
+  line-height: 22px;
+  background-color: $filter-option-bgColor;
+  border-radius: 2px;
+  cursor: pointer;
+  margin: 6px;
+
+  &.is-selected, &:hover {
+    background: $filter-condition-bgColor;
+    color: $filter-condition-color;
+  }
+
+  &:active {
+    transform: scale(0.9)
+  }
+}
+
+@include b(filter-date) {
+  margin-left: 6px;
+  &.el-date-editor {
+    width: 100% !important;
+  }
+}
+
+@include b(scale-click) {
+  cursor: pointer;
+  &:active {
+    transform: scale(0.9)
+  }
+}

package/src/styles/components/read-write-switch.scss

@@ -0,0 +1,6 @@
+@use "../common/mixins.scss" as *;
+@use "../common/variables.scss" as *;
+
+@include b(read-write-switch) {
+  min-height: 20px;
+}